Text Color

Tailwind gives you a full palette of text color utilities built into the default theme. From simple colors like text-red-500 to nuanced shades like text-gray-500, you have everything you need for professional typography.

Basic text colors

Every color in Tailwind's palette comes with nine shades, from 50 (lightest) to 900 (darkest).

<p class="text-gray-900">Almost black text</p>
<p class="text-gray-500">Medium gray text</p>
<p class="text-gray-300">Light gray text</p>
<p class="text-blue-600">Blue text</p>
<p class="text-red-500">Error text</p>
<p class="text-green-500">Success text</p>
    

Hover and focus colors

Change text color on hover or focus using state prefixes.

<a class="text-blue-600 hover:text-blue-800 underline">
  Link that darkens on hover
</a>
    

Opacity modifiers

Add an opacity value to any text color using the slash syntax.

<p class="text-black/50">50% opacity black text</p>
<p class="text-blue-500/75">75% opacity blue text</p>
    

Custom colors

You can add your own brand colors in tailwind.config.js and use them as text utilities immediately.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: "#6366f1",
      },
    },
  },
}
    

<p class="text-brand">Brand colored text</p>