Text Color
Color text with the text-* palette utilities.
Syntax
class="text-cyan-600"Set text color with text-{color}-{shade}. The same 50–950 scale from the colors lesson applies.
Combine with state prefixes like hover:text-cyan-600 for interactive text.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer applies text-red-600 to an error message to make it immediately distinguishable from surrounding gray body text.
- A muted secondary caption is styled with text-gray-400 to reduce its visual weight relative to the primary text.
- A hover state on a navigation link changes from text-gray-600 to text-indigo-600 to provide clear interactive feedback.
More examples
Semantic text colors
Named color utilities communicate status at a glance — green for success, red for error, yellow for warning — without custom classes.
<p class="text-green-600">Payment successful.</p>
<p class="text-red-600">Card was declined.</p>
<p class="text-yellow-700">Verification pending.</p>Text hierarchy with grays
Using gray-900, gray-600, and gray-400 creates a three-tier content hierarchy where visual weight signals importance.
<h2 class="text-gray-900 font-semibold text-xl">Primary heading</h2>
<p class="text-gray-600 mt-1">Supporting body copy.</p>
<span class="text-gray-400 text-sm">Last updated 2 hours ago</span>Hover text color change
Combining a default text color with a hover: variant and transition-colors produces a smooth link color change on cursor entry.
<a href="/about"
class="text-gray-600 hover:text-indigo-600 transition-colors">
About Us
</a>
Discussion