Tailwind Text Color

The text-color utility class in Tailwind CSS allows you to easily set the color of text within elements. With Tailwind's text color classes, you can quickly apply different colors to your text without writing custom CSS.

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.

Tailwind Custom Colors

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.

<div class="text-custom-blue">
  This text has a custom blue color.
</div>

In the above example, a custom color called custom-blue is defined in the Tailwind CSS configuration file. The text-custom-blue class is applied to the <div> element, setting its text color to the defined custom blue color.

Responsive Text Color

Tailwind CSS allows you to apply text colors responsively at different breakpoints. To use responsive text color classes, you can append the breakpoint prefix to the text color class. For example, md:text-green-500 applies the green text color starting from the medium breakpoint and above.

<div class="text-blue-500 md:text-green-500">
  This text is blue by default, but changes to green starting from the medium breakpoint.
</div>

Preview

In the above example, the text-blue-500 class is applied by default, setting the text color to blue. However, starting from the medium breakpoint and above (md:text-green-500), the text color changes to green.

Tailwind CSS Text Color Class Table

🔍 Keep Exploring

• Tailwind Background Color

Windframe Tailwind blocks

Landing page