Tailwind CSS: Change the color of text.

Working with Text

Change the color of text.

Skill ID: WorkingWithText_25

Description: Make text different colors for emphasis, branding, or links.

Where to apply: Links, headings, subtle helper text, error messages.

Key Tailwind Classes:


       text-red-500


       text-gray-700

Gotcha: Using too many different text colors can be jarring. Also, poor contrast between text color and background color makes text hard to read and is an accessibility issue.

Example:

This is standard text.

This text is red, using text-red-500 .

This text is blue, perhaps for a link , using text-blue-600 .

This text is a shade of gray, using text-gray-700 .

Subtle helper text could use a lighter gray like text-gray-500 .

Tailwind CSS Concept Explained

Working with Text

Change the color of text.

Example:

Example 1:

Example 2:

Example 3:

Example 4:

Example 5:

Example 6:

Example 7:

Example 8:

Example 9: