What is Text color utilities in Tailwind?

Tailwindmarkup~5 mins

Text color utilities in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Text color utilities help you change the color of text easily. This makes your website look nice and clear.

You want to highlight important words in a paragraph.

You need to match text color with your brand colors.

You want to show error messages in red color.

You want to make links stand out with a different color.

You want to improve readability on different backgrounds.

Syntax

Tailwind

text-{color}-{shade}

{color} is the color name like red, blue, green, etc.

{shade} is the number that shows how light or dark the color is, usually from 50 (light) to 900 (dark).

Examples

This makes the text medium red.

Tailwind

text-red-500

This makes the text a darker blue.

Tailwind

text-blue-700

This makes the text a lighter green.

Tailwind

text-green-300

This makes the text very dark gray, almost black.

Tailwind

text-gray-900

Sample Program

This example shows four lines of text, each with a different Tailwind text color utility. You can see how the text color changes based on the class used.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Text Color Utilities Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-red-500">This text is red</h1>
  <p class="text-blue-700">This text is dark blue</p>
  <p class="text-green-300">This text is light green</p>
  <p class="text-gray-900">This text is very dark gray</p>
</body>
</html>

OutputSuccess

Important Notes

You can combine text color utilities with other Tailwind classes for spacing, font size, and more.

Use colors that have good contrast with the background for easy reading.

Tailwind colors follow a scale from 50 (lightest) to 900 (darkest).

Summary

Text color utilities let you quickly change text colors using simple class names.

Use text-{color}-{shade} format to pick the color and shade.

Choose colors that make your text easy to read and visually appealing.