Tailwind Text Color Utilities

What Are Text Color Utilities?

text-{color}-{shade} utilities map to the CSS color property, using Tailwind's default palette of colors (like slate, blue, red, emerald) each with shades from 50 (lightest) to 950 (darkest).

Consistent text color usage, primary text in a dark shade, secondary text in a lighter shade, is one of the fastest ways to make an interface feel polished and hierarchical.

<h2 class="text-slate-900 font-bold">Primary Heading</h2>
<p class="text-slate-600">Secondary supporting text.</p>
<a class="text-blue-600 hover:text-blue-800" href="/learn-more">Learn more</a>

Darker slate for the heading, medium slate for supporting text, and blue for an interactive link, three distinct roles.

Text Color Utility Syntax

class="text-{color}-{shade}"
class="text-{color}-{shade}/{opacity}"

• {color} is a palette name like slate, blue, emerald, or red.
• {shade} is a number from 50 to 950, lower numbers are lighter.
• An optional /{opacity} suffix sets color opacity, like text-slate-900/70 for 70% opacity.
• text-white, text-black, and text-current are shorthand keyword colors without a shade number.

Text Color Cheatsheet

Common text color roles and how they map to shades.

Understanding the Shade Scale

Each Tailwind color includes eleven shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. Lower numbers are lighter and higher numbers are darker, consistently across every color in the palette.

<p class="text-blue-300">Light blue (300)</p>
<p class="text-blue-500">Medium blue (500)</p>
<p class="text-blue-700">Dark blue (700)</p>
<p class="text-blue-900">Very dark blue (900)</p>

Text Color Opacity Modifiers

Instead of a separate opacity utility, Tailwind supports an inline opacity modifier directly in the color class using a slash, letting you fine-tune transparency without adding an extra class.

<p class="text-slate-900/50">
  This text is 50% opacity slate-900, useful for subtly de-emphasized copy.
</p>

Text Colors in Dark Mode

Text colors almost always need a dark: counterpart, since a color that reads clearly on a white background can lose contrast entirely on a dark background.

<p class="text-slate-900 dark:text-slate-100">
  Primary text that flips between near-black and near-white.
</p>
<p class="text-slate-500 dark:text-slate-400">
  Secondary text with adjusted shade for each theme.
</p>

Maintaining Accessible Text Contrast

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text against its background. Lighter shades like 300 or 400 often fail this ratio on white backgrounds and should be reserved for large or non-essential text.

• Use shade 600 or darker for body text on a white background to comfortably meet WCAG AA.
• Test color combinations with a contrast checker, don't rely on visual impression alone.
• Increase shade contrast further for small text, since smaller text needs a higher contrast ratio to stay legible.

Common Mistakes

• Using very light shades (100-300) for body text on a white background, failing accessibility contrast requirements.
• Forgetting dark: variants on text colors, resulting in unreadable text once dark mode is enabled.
• Overusing bright, saturated colors for large blocks of text instead of neutral shades like slate or gray.
• Not checking contrast ratios for colored text on colored backgrounds, a common accessibility failure.
• Mixing too many different colors for text across a single page, weakening visual hierarchy.

Key Takeaways

• Text color utilities follow a text-{color}-{shade} pattern with an 11-step shade scale per color.
• Opacity modifiers like text-slate-900/60 set transparency inline without an extra utility.
• Darker shades (600+) are generally required for body text to meet accessibility contrast standards.
• Text colors almost always need a paired dark: variant for proper dark mode support.
• Consistent color roles (primary, secondary, link, success, error) improve visual hierarchy sitewide.