Text Color

Color text from the palette with per-class opacity modifiers and theme variables.

4 min read Level 2/5 #tailwind#typography#color

What you'll learn

Use text-{color}-{shade} from the palette
Add per-class opacity with the slash modifier
Read semantic theme colors and special keywords

Text color follows the same name-shade pattern as the rest of the palette, with an opacity modifier baked into the syntax.

Color and Shade

<p class="text-gray-700 dark:text-gray-300">Primary body text.</p>
<p class="text-red-600">An error message.</p>
<a class="text-blue-600 hover:text-blue-800">A link.</a>

Opacity Modifiers

Append /NN to fade just the color — this is better than opacity-*, which would also fade child content:

<p class="text-blue-600/80">Slightly softened blue.</p>
<p class="text-black/50">Muted secondary text.</p>

Theme Variables and Keywords

Read a CSS theme variable directly with the parenthesis syntax, and use the inherit/current keywords for icon and component composition:

<p class="text-(--color-brand)">Reads a theme variable.</p>
<svg class="text-current">…</svg>
<span class="text-inherit">Inherits from the parent.</span>

Better Wrapping

Two utilities improve how lines break — text-balance evens out headings, text-pretty avoids orphans in body copy:

<h1 class="text-balance text-4xl font-bold">
  A headline whose lines are balanced for even ragged edges
</h1>
<p class="text-pretty">Body text that avoids a lonely last word.</p>

The Color System →