Text Color Utilities

Text color utilities in Tailwind CSS are used to change the color of text on webpages.

Text colors help:

improve readability
highlight important content
create attractive UI designs
maintain visual hierarchy

Tailwind provides predefined color utility classes that can be directly used inside HTML elements.

Text Color Format

Tailwind text colors follow this format:

text-color-shade

Example

text-red-500
text-blue-600
text-green-700

Color Shade System

Tailwind colors use shade values from:

50
100
200
up to 900

Lower values: lighter colors

Higher values: darker colors

Common Text Color Classes

Class	Meaning
`text-red-500`	Red text
`text-blue-600`	Blue text
`text-green-700`	Green text
`text-yellow-500`	Yellow text
`text-purple-600`	Purple text
`text-gray-700`	Gray text
`text-black`	Black text
`text-white`	White text

Example : Basic Text Color

<!DOCTYPE html>
<html>
<head>
  <title>Text Color Example</title>

  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6 space-y-4">

  <p class="text-red-500">
    Red Text
  </p>

  <p class="text-blue-600">
    Blue Text
  </p>

  <p class="text-green-700">
    Green Text
  </p>

  <p class="text-yellow-500">
    Yellow Text
  </p>

  <p class="text-purple-600">
    Purple Text
  </p>

</body>
</html>

Body Classes

<body class="p-6 space-y-4">

p-6

Adds padding around the webpage.

space-y-4

Adds vertical spacing between paragraphs.

Red Text

<p class="text-red-500">

text-red-500

Changes text color to red.

Blue Text

<p class="text-blue-600">

text-blue-600

Changes text color to blue.

Green Text

<p class="text-green-700">

text-green-700

Changes text color to green.

Yellow Text

<p class="text-yellow-500">

text-yellow-500

Changes text color to yellow.

Purple Text

<p class="text-purple-600">

text-purple-600

Changes text color to purple.

Example: Light and Dark Shade

<!DOCTYPE html>
<html>
<head>
  <title>Text Shade Example</title>

  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6 space-y-4">

  <p class="text-blue-200">
    Light Blue Text
  </p>

  <p class="text-blue-500">
    Normal Blue Text
  </p>

  <p class="text-blue-900">
    Dark Blue Text
  </p>

</body>
</html>

text-blue-200

Very light blue text.

text-blue-500

Normal blue text.

text-blue-900

Very dark blue text.

Special Text Colors

Some colors do not require shades.

Class	Meaning
`text-white`	White text
`text-black`	Black text
`text-transparent`	Transparent text

Example : Special Colors

<!DOCTYPE html>
<html>
<head>
  <title>Special Text Colors</title>

  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-800 p-6 space-y-4">

  <p class="text-white">
    White Text
  </p>

  <p class="text-black bg-white">
    Black Text
  </p>

</body>
</html>

text-white

Creates white text.

Mostly used on dark backgrounds.

text-black

Creates black text.

Mostly used on light backgrounds.

Text Color Usage Examples

Color	Common Usage
Red	Error messages
Green	Success messages
Blue	Links and headings
Yellow	Warnings
Gray	Paragraphs and secondary text
White	Dark background content

Advantages of Text Color Utilities

Improves readability
Creates attractive UI
Highlights important information
Faster styling
Consistent color design

Summary

In this topic, we learned how text color utilities in Tailwind CSS help style and organize webpage text using predefined color classes. We explored different text colors, shade systems, and special colors like white and black. Tailwind text color utilities make UI design cleaner, more readable, and visually attractive.

Keywords

Text Color Utilities, text-red-500, text-blue-600, Tailwind Colors, Color Shades, Typography, UI Design, Text Styling, Modern Web Design, Frontend Development, Responsive UI, CSS Framework.