Text color

Class reference

# Usage

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

<input class="text-orange-600 ...">

# Changing opacity

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

<p class="text-violet-600 text-opacity-100">The quick brown fox jumped over the lazy dog.</p>
<p class="text-violet-600 text-opacity-75">The quick brown fox jumped over the lazy dog.</p>
<p class="text-violet-600 text-opacity-50">The quick brown fox jumped over the lazy dog.</p>
<p class="text-violet-600 text-opacity-25">The quick brown fox jumped over the lazy dog.</p>
<p class="text-violet-600 text-opacity-0">The quick brown fox jumped over the lazy dog.</p>

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.

<p class="text-violet-600 md:text-green-600 ...">
  The quick brown fox...
</p>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.

# 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-violet-600 to apply the text-violet-600 utility on hover.

<button class="text-white hover:text-red-500 ...">
  Button
</button>

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

<button class="... md:text-blue-400 md:hover:text-blue-500 ...">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-violet-600 to apply the text-violet-600 utility on focus.

<input class="text-gray-900 focus:text-red-600 ...">

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

<input class="... md:text-gray-900 md:focus:text-red-400 ...">