Tailwind CSS - Text Color

Modern Guide to Text Color in Tailwind CSS

Tailwind CSS provides an extensive, curated color palette available through utility classes to style the color of your text. These utilities make it easy to maintain a consistent color scheme and build beautiful, themeable user interfaces.

Understanding Text Color Utilities

Text color classes follow a simple, predictable pattern: text-{color}-{shade}.

• text: The utility prefix.
• {color}: The name of the color (e.g., slate, blue, red).
• {shade}: A number from 50 (lightest) to 950 (darkest) that defines the intensity of the color.

Tailwind also includes special-purpose color classes:

Class	CSS Properties	Description
text-inherit	color: inherit;	Sets the text color to that of its direct parent element.
text-current	color: currentColor;	Sets the text color to the current value of the CSS color property. Useful for SVGs.
text-transparent	color: transparent;	Makes the text color transparent.
text-black / text-white	color: rgb(0 0 0); / rgb(255 255 255);	Applies pure black or pure white.

Practical Application: Building a Notification Component

Instead of just coloring plain text, let’s use text color utilities to build a realistic UI component. This example shows a notification card where different colors are used to convey meaning and create a visual hierarchy.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Color Component</title>
    <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-100 dark:bg-slate-900 flex items-center justify-center min-h-screen p-4">

    <!-- Notification Component -->
    <div class="max-w-md w-full bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
        <h3 class="font-bold text-lg text-slate-800 dark:text-slate-100">
            New Message Received
        </h3>
        <p class="mt-2 text-slate-600 dark:text-slate-400">
            You have a new message from a team member regarding the Q4 project proposal. Please review it at your earliest convenience.
        </p>
        <div class="mt-4">
            <a href="#" class="font-semibold text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
                View Message &rarr;
            </a>
        </div>
    </div>

</body>
</html>

Advanced Usage: Hover, Focus, and Dark Mode

Tailwind’s power shines when you combine utilities with state variants like hover:, focus:, and dark:. This allows you to create interactive and theme-aware components with ease.

Example: Interactive Button

This example demonstrates a button that changes its text color on hover and in dark mode. The dark: prefix applies styles only when the user’s system (or a manual toggle) is set to a dark theme.

<!DOCTYPE html>
<!-- Add 'dark' class here to manually test dark mode -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Text Color</title>
    <link href="/dist/output.css" rel="stylesheet">
    <script>
        // Optional: script to toggle dark mode
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark')
        } else {
            document.documentElement.classList.remove('dark')
        }
    </script>
</head>
<body class="bg-white dark:bg-black flex items-center justify-center min-h-screen">

    <button class="px-6 py-3 rounded-lg font-semibold
                   bg-violet-100 text-violet-700
                   hover:bg-violet-200 hover:text-violet-900
                   dark:bg-violet-900/50 dark:text-violet-300
                   dark:hover:bg-violet-900 dark:hover:text-violet-100
                   focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2 dark:focus:ring-offset-black">
        Click Me
    </button>

</body>
</html>

Best Practice: Accessibility and Contrast

When choosing text colors, always ensure there is sufficient contrast against the background color. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal text. Use an online contrast checker to verify your color combinations. For example, text-slate-500 on a white background is accessible, but text-slate-300 is not.