Bird
Raised Fist0
Tailwindmarkup~5 mins

Text color utilities in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. What does the Tailwind class text-red-500 do to the text?
easy
A. Changes the text color to a medium shade of red
B. Makes the text bold
C. Adds a red background behind the text
D. Underlines the text with a red line

Solution

  1. Step 1: Understand Tailwind text color syntax

    The class text-red-500 uses the format text-{color}-{shade} to set text color.

  2. Step 2: Interpret the color and shade

    Here, red is the color and 500 is a medium shade, so it changes text color to medium red.

  3. Final Answer:

    Changes the text color to a medium shade of red -> Option A

  4. Quick Check:

    text-red-500 sets medium red text color [OK]
Hint: Remember text-{color}-{shade} sets text color [OK]
Common Mistakes:
  • Confusing text color with background color
  • Thinking it changes font weight
  • Assuming it adds underline
2. Which of these is the correct Tailwind class to make text blue with a light shade?
easy
A. text-blue-900
B. text-light-blue
C. text-blue-100
D. text-blue-light

Solution

  1. Step 1: Recall Tailwind shade numbering

    Lower numbers like 100 mean lighter shades, higher numbers like 900 mean darker shades.

  2. Step 2: Identify correct syntax for light blue text

    text-blue-100 is the correct format for light blue text color.

  3. Final Answer:

    text-blue-100 -> Option C

  4. Quick Check:

    Light shade uses 100 number [OK]
Hint: Use lower shade numbers for lighter colors [OK]
Common Mistakes:
  • Using invalid class names like text-light-blue
  • Confusing shade numbers (900 is dark)
  • Mixing background and text color classes
3. What color will the text be with this HTML snippet?
<p class="text-green-700">Hello</p>
medium
A. A dark green color
B. A light green color
C. A medium blue color
D. A bright red color

Solution

  1. Step 1: Analyze the class name

    The class text-green-700 sets the text color to green with shade 700, which is a darker shade.

  2. Step 2: Match shade to color intensity

    Shade 700 is darker than 500 or 400, so the text will appear dark green.

  3. Final Answer:

    A dark green color -> Option A

  4. Quick Check:

    Shade 700 means dark color [OK]
Hint: Higher shade number means darker color [OK]
Common Mistakes:
  • Assuming 700 is light shade
  • Mixing green with blue or red
  • Ignoring the shade number
4. Identify the error in this Tailwind class usage:
<span class="text-purple-">Sample</span>
medium
A. Wrong color name 'purple'
B. Missing shade number after color name
C. Class should be 'bg-purple-' for background color
D. Text color classes cannot be used on span elements

Solution

  1. Step 1: Check the class syntax

    The class text-purple- ends with a dash but no shade number, which is invalid.

  2. Step 2: Confirm correct usage

    Tailwind requires a shade number like 100, 500, 700 after the color name for text color classes.

  3. Final Answer:

    Missing shade number after color name -> Option B

  4. Quick Check:

    Shade number is required after color [OK]
Hint: Always include shade number after color in text classes [OK]
Common Mistakes:
  • Leaving out the shade number
  • Confusing text and background classes
  • Thinking any element can't have text color
5. You want to make text that is easy to read on a dark background using Tailwind. Which class should you use?
hard
A. text-white-500
B. text-gray-900
C. text-black
D. text-gray-100

Solution

  1. Step 1: Understand contrast needs on dark backgrounds

    Light text colors are easier to read on dark backgrounds, so a light gray or white is best.

  2. Step 2: Evaluate the options

    text-gray-100 is a very light gray, suitable for dark backgrounds. text-gray-900 and text-black are dark colors, hard to read on dark backgrounds. text-white-500 is invalid because white doesn't have shades.

  3. Final Answer:

    text-gray-100 -> Option D

  4. Quick Check:

    Light colors for dark backgrounds [OK]
Hint: Use light shades for text on dark backgrounds [OK]
Common Mistakes:
  • Using dark text on dark backgrounds
  • Assuming white has shade numbers
  • Confusing background and text colors