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>
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>
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>
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>
custom text color
You can use text-[custom color code].
<p class="text-[#99ff66]">tailwind css custom text color</p>
