How to change text color in Tailwind CSS

Text color is probably one of the first things you'll style when building a website. Whether you're creating headings, body copy, or interactive elements, getting the color right makes all the difference.

I've been using Tailwind CSS for quite some time now and one thing that keeps surprising me is how simple it makes text color styling. No more hunting through CSS files or creating custom classes for every little color change.

Let me walk you through everything you need to know about changing text colors in Tailwind CSS, from basic colors to advanced techniques that'll make your designs stand out.

The basics of text color classes

Tailwind uses a simple pattern for text colors: text-{color}-{shade}. The color part is self-explanatory (blue, red, green, etc.), and the shade ranges from 50 (lightest) to 950 (darkest).

Here's what that looks like in action:

Simple, right? Tailwind gives you 11 shades for each color (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950). The middle value (500) is usually your base color, while lower numbers get lighter and higher numbers get darker.

Adding transparency with opacity modifiers

Sometimes you need text that's slightly see-through. Maybe you want to create a subtle effect or indicate disabled content. Instead of creating a new color class, just add a slash and the opacity percentage.

This is way cleaner than the old approach where you had to use separate opacity classes. The slash syntax keeps everything in one place and makes your code easier to read.

Using custom colors with arbitrary values

What if you need a specific brand color that's not in Tailwind's palette? That's where arbitrary values come in. Just wrap your color in square brackets and you're good to go.

You can use hex codes, RGB values, HSL, or even CSS variables. If you're using a CSS variable, Tailwind will automatically wrap it with var() for you when you use the text-(--variable-name) syntax.

Dark mode and responsive text colors

Here's where Tailwind really shines. You can change text colors based on dark mode or screen size without writing a single line of custom CSS.

The dark: prefix lets you specify a different color for dark mode. Combine that with responsive prefixes like md: or lg:, and you've got complete control over how your text looks in any context.

Notice the hover effect on the last example? You can combine text color utilities with any of Tailwind's state variants (hover, focus, active, etc.) and throw in a transition for smooth color changes.

Building a real-world alert component

Let's put everything together and build something practical. Here's an alert component that uses different text colors to communicate different message types:

Each alert uses darker text on a lighter background of the same color family. The slight opacity on the description text (90%) creates a subtle hierarchy between the title and body content. This pattern works great for any kind of status message in your UI.

That's pretty much it for text colors in Tailwind CSS. What I love most about this system is how consistent and predictable it is. Once you understand the basic pattern, you can style text anywhere in your project without constantly looking things up.

The opacity modifiers, arbitrary values, and dark mode support give you all the flexibility you need without making your code messy. And when you combine text colors with responsive breakpoints and hover states, you can create some really polished interfaces.

I hope this helps you get more comfortable with text colors in Tailwind. Stay tuned for more tips!