tailwindcss/docs/source/docs/text-color.blade.md

extends	title
_layouts.documentation	Text Color

Text Color

Utilities for controlling the text color of an element.

@include('_partials.feature-badges', [ 'responsive' => true, 'customizable' => true, 'hover' => true, 'focus' => false ])

@include('_partials.work-in-progress')

@foreach ($page->config['colors'] as $name => $value) @endforeach

Class	Properties	Description
.text-{{ $name }}	color: {{ $value }};	Set the text color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.

Hover

In addition to the standard responsive variations, text colors also come in hover: variations that apply the given text color on hover.

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

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

<button class="... md:text-blue md:hover:text-red ...">Button</button>