Bird
Raised Fist0
Tailwindmarkup~30 mins

Text color utilities in Tailwind - Mini Project: Build & Apply

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
Text Color Utilities with Tailwind CSS
📖 Scenario: You are building a simple webpage that shows different text colors using Tailwind CSS. This will help you understand how to apply text color utilities to HTML elements.
🎯 Goal: Create a webpage with a heading and three paragraphs. Each paragraph should have a different text color using Tailwind CSS text color utilities.
📋 What You'll Learn
Use Tailwind CSS text color utilities to color text
Create a heading with default text color
Create three paragraphs with text colors: red, green, and blue
Use semantic HTML elements
Ensure the page is responsive and accessible
💡 Why This Matters
🌍 Real World
Text color utilities are used in websites to highlight important information, improve readability, and create visually appealing designs.
💼 Career
Knowing how to use Tailwind CSS text color utilities helps you quickly style web pages in modern frontend development jobs.
Progress0 / 4 steps
1
Create the basic HTML structure
Create a basic HTML5 skeleton with lang="en", charset="UTF-8", and a viewport meta tag. Inside the <body>, add a <main> element with a <h1> heading that says "Text Color Utilities".
Tailwind
Hint

Remember to include the lang attribute in the <html> tag and the viewport meta tag for responsiveness.

2
Add Tailwind CSS link
Add the Tailwind CSS CDN link inside the <head> section to enable Tailwind utilities. Use the official Tailwind CDN link: https://cdn.tailwindcss.com.
Tailwind
Hint

Use a <script> tag with the src attribute set to https://cdn.tailwindcss.com inside the <head>.

3
Add paragraphs with different text colors
Inside the <main> element, add three <p> paragraphs with these exact texts and Tailwind text color classes: "This is red text." with text-red-600, "This is green text." with text-green-600, and "This is blue text." with text-blue-600.
Tailwind
Hint

Use the class attribute on each <p> tag with the correct Tailwind text color class.

4
Make the page responsive and accessible
Add a class to the <main> element to center the content horizontally and add vertical spacing between paragraphs using Tailwind utilities: use max-w-md mx-auto p-4 space-y-4. Also, add an aria-label to the <main> with the value "Text color examples".
Tailwind
Hint

Use Tailwind classes to center and space content, and add an aria-label for accessibility.

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