Tailwind Text Color

Tailwind's text-{color} utility allows you to set the text color of any element using a scalable, consistent system. With Tailwind's text color classes, you can quickly apply different colors to your text without writing custom CSS or you can also write your own custom color and apply it.

How to apply Tailwind Text Color

To apply a Tailwind text color to an element, you can use the text-{color} utility class, where {color} represents the desired color. Tailwind CSS provides a wide range of color options that you can use out of the box.

<div class="text-red-500">This text has a red color.</div>

Preview

Color Variants

Tailwind CSS includes color variants that you can use to modify the brightness or opacity of a color. These variants are specified using a number from 100 to 900. For example, you can use text-red-100 for a lighter shade of red and text-red-900 for a darker shade of red.

<div class="text-green-300">This text has a lighter shade of green color.</div>

<div class="text-green-700">This text has a darker shade of green color.</div>

Preview

In the above example, the text-red-100 class is applied to the first <div> element, setting its text color to a lighter shade of red. The text-red-900 class is applied to the second <div> element, setting its text color to a darker shade of red.

✏️ Arbitrary Value Usage

Need full control? Use arbitrary values for custom or one-off colors.

Hex, RGB, HSL:

<p class="text-[#ff5733]">Hex color</p>
<p class="text-[rgb(30,144,255)]">RGB color</p>
<p class="text-[hsl(200,100%,50%)]">HSL color</p>

Preview

Use this for edge cases or dynamic theming scenarios.

Responsive Text Color

Tailwind CSS allows you to apply text colors responsively at different breakpoints. Use responsive prefixes to change text color at different screen sizes. For example, md:text-green-500 applies the green text color starting from the medium breakpoint and above.

<p class="text-gray-500 sm:text-gray-700 md:text-gray-900">
	Text darkens on larger screens
</p>

Preview

Useful for adapting color contrast as layout and backgrounds shift across breakpoints.

🎯 Interaction State Use (hover/focus)

Tailwind makes it easy to change text color on hover, focus, and active states.

Hover example:

<a href="#" class="text-gray-600 hover:text-blue-600"> Hover to highlight </a>

Preview

Focus example:

<h1 class="text-2xl font-bold text-center mb-5">Fill the form</h1>
  <label class="m-1 text-gray-700 font-bold">Email</label>
<input class="text-gray-700 focus:text-black p-2 border-2 border-gray-300 rounded-lg" placeholder="email" />
</div>

Preview

You can also target group-hover, focus-within, or active states for advanced interactivity.

⚙️ Customization in tailwind.config.js

Tailwind CSS also allows you to define your own custom colors in the configuration file. Once defined, you can use your custom colors with the text-{color} utility class.

// tailwind.config.js
module.exports = {
	theme: {
		extend: {
			colors: {
				brand: {
					DEFAULT: "#1a73e8",
					dark: "#174ea6",
				},
			},
		},
	},
};

<h1 class="text-brand">Brand Blue</h1>
<p class="text-brand-dark">Dark brand shade</p>

Preview

This creates a consistent visual language in your app.

🧩 Real UI Component Examples

🔹 Button with Hover Text Color

<button
	class="px-4 py-2 border rounded text-indigo-600 hover:text-white hover:bg-indigo-600 transition"
>
	Hover Me
</button>

Preview

🔹 Alert Component

<div class="bg-red-100 border border-red-300 p-4 text-red-700">
	⚠️ Error: Something went wrong.
</div>

Preview

✅ Best Practices for Devs & Designers

• Use contrast-aware text colors (e.g., text-white on dark backgrounds, text-gray-900 on light).

• Pair text-* with bg-* mindfully for accessible color combinations.

• Use semantic naming when customizing (text-error, text-success, text-muted) via tailwind.config.js.

• Avoid using too many shades of the same color — stick to a 3–5 tone scale (light, base, dark, hover, disabled).

♿ Accessibility Notes

• Avoid low-contrast combinations like text-gray-400 on bg-white for body text.

• Use browser tools or plugins (e.g., axe DevTools) to test contrast levels.

Tailwind CSS Text Color Class Table

🔍 Keep Exploring

• Tailwind Background Color

Windframe Tailwind blocks

Landing page