Learn How to Use Text Color in Tailwind CSS

In this tutorial, we’ll learn how to utilize text colors in Tailwind CSS. Additionally, we’ll delve into responsive text colors, hover text colors, and provide examples of customizing text colors with Tailwind CSS.

Tailwind CSS Text Color Example

Predefined Colors

Tailwind CSS comes with a set of predefined colors that you can use out of the box. The naming convention for text color utilities follows the pattern text-{color}, where {color} is replaced with the desired color name.

<p class="text-red-500">This text will be red.</p>
<p class="text-blue-700">This text will be a dark shade of blue.</p>
<p class="text-green-300">This text will be a light shade of green.</p>
text color

Shades and Opacities

Each predefined color in Tailwind CSS has different shades and opacities available. The shades range from 100 (lightest) to 900 (darkest), and you can also specify opacities using values from 0 (transparent) to 100 (opaque). Here are some examples.

<p class="text-gray-200">This text will be a very light gray.</p>
<p class="text-indigo-600">This text will be a medium shade of indigo.</p>
<p class="text-yellow-400/75">This text will be a semi-transparent yellow.</p>
Shades and Opacities color

Hover, Focus, and Active States

Tailwind CSS allows you to apply different text colors for different states, such as hover, focus, and active. You can use the following utility classes:

<a href="#" class="text-blue-500 hover:text-blue-700">This link will change color on hover.</a>
<input type="text" class="text-gray-500 focus:text-green-500" placeholder="This input text will change color on focus">
<button class="text-blue-500 active:text-gray-300">This button text will change color when active</button>
Hover, Focus, and Active States

Responsive Text Colors

Tailwind CSS also provides responsive utilities for text colors, allowing you to apply different colors based on the screen size. The naming convention for responsive utilities follows the pattern {screen}:{utility}, where {screen} is replaced with the desired screen size (e.g., sm, md, lg, xl), and {utility} is the text color utility.

<p class="text-black sm:text-blue-500 md:text-green-700 lg:text-red-900">This text will change color based on screen size.</p>
responsive text color

custom text color

You can use text-[custom color code].

<p class="text-[#99ff66]">tailwind css custom text color</p>
custom text color