Text Color

@include('_partials.text-color-class-table', [ 'rows' => $page->config['theme']['colors']->flatMap(function ($colors, $name) { if (is_string($colors)) { return [ [".text-{$name}", "color: {$colors};"] ]; }

return collect($colors)->map(function ($value, $key) use ($name) {
  $class = ".text-{$name}-{$key}";
  $code = "color: {$value};";
  return [
    $class,
    $code,
  ];
});

})->values()->all() ])

Usage

Control the text color of an element using the .text-{color} utilities.

@component('_partials.code-sample', ['class' => 'text-center'])

@slot('code')@endslot @endcomponent

Changing opacityv1.4.0+

Control the opacity of an element's text color using the .text-opacity-{amount} utilities.

@component('_partials.code-sample')

@slot('code') @foreach ($page->config['theme']['opacity']->reverse() as $name => $value)

The quick brown fox ...

@endforeach @endslot @endcomponent

Learn more in the text opacity documentation.

Responsive

To control the text color of an element at a specific breakpoint, add a {screen}: prefix to any existing text color utility. For example, use md:text-green-600 to apply the text-green-600 utility at only medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample', ['class' => 'text-center']) @slot('none')

@endslot @slot('sm')@endslot @slot('md')@endslot @slot('lg')@endslot @slot('xl')@endslot @slot('code')@endslot @endcomponent

Hover

To control the text color of an element on hover, add the hover: prefix to any existing text color utility. For example, use hover:text-blue-600 to apply the text-blue-600 utility on hover.

@component('_partials.code-sample', ['class' => 'text-center'])

Button

@slot('code')

Button@endslot @endcomponent

Hover utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the hover: prefix.

<button className="... md:text-blue-500 md:hover:text-blue-600 ...">Button</button>

Focus

To control the text color of an element on focus, add the focus: prefix to any existing text color utility. For example, use focus:text-blue-600 to apply the text-blue-600 utility on focus.

@component('_partials.code-sample', ['lang' => 'html'])

@slot('code')

@endslot @endcomponent

Focus utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the focus: prefix.

<input className="... md:text-gray-900 md:focus:text-red-600 ..."/>

Customizing

Text Colors

By default Tailwind makes the entire default color palette available as text colors.

You can customize your color palette by editing theme.colors in your tailwind.config.js file, or customize just your text colors in the theme.textColor section.

@component('_partials.customized-config', ['key' => 'theme'])

• textColor: theme => theme('colors'),

• textColor: {
•   'primary': '#3490dc',
•   'secondary': '#ffed4a',
•   'danger': '#e3342f',
• } @endcomponent

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'text color', 'property' => 'textColor', ], 'variants' => [ 'responsive', 'hover', 'focus', ], ])