Text color utilities in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Correct Tailwind class for red text

Which Tailwind CSS class will correctly apply a red text color to an element?

A color-red

B text-red-500

C textcolor-red

D red-text

💡 Hint

Tailwind uses a specific pattern for text color classes starting with 'text-'.

In Tailwind CSS, text colors use the pattern text-{color}-{shade}. For red, text-red-500 is a common shade.

❓ rendering

intermediate

Visual effect of text-green-700

What will be the visible effect on text when the class text-green-700 is applied?

Tailwind

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

A The text color changes to a dark green shade.

B The text becomes bold and green.

C The background color changes to green.

D The text color changes to light green.

💡 Hint

Tailwind color shades increase in darkness with higher numbers.

The class text-green-700 applies a dark green color to the text. It does not affect font weight or background.

❓ selector

advanced

Selecting text color for accessibility

Which Tailwind text color utility is best for ensuring good contrast on a white background for accessibility?

A text-gray-900

B text-gray-300

C text-yellow-200

D text-pink-100

💡 Hint

Higher contrast means darker text on light backgrounds.

text-gray-900 is a very dark gray, providing strong contrast on white backgrounds, which is important for readability and accessibility.

❓ layout

advanced

Combining text color with responsive design

Which Tailwind classes will make text blue on small screens and red on medium and larger screens?

A md:text-blue-500 text-red-500

B text-red-500 sm:text-blue-500

C text-blue-500 lg:text-red-500

D text-blue-500 md:text-red-500

💡 Hint

Tailwind uses prefixes like md: to apply styles at certain screen sizes.

text-blue-500 applies blue text by default (small screens). md:text-red-500 changes text to red starting at medium screens and up.

❓ accessibility

expert

Ensuring text color meets WCAG contrast standards

Given a background color of bg-yellow-300, which text color utility ensures the best WCAG AA contrast compliance?

Tailwind

<div class="bg-yellow-300 p-4">
  <p class="?">Accessible Text</p>
</div>

A text-yellow-100

B text-yellow-500

C text-black

D text-white

💡 Hint

WCAG AA requires sufficient contrast between text and background colors.

text-black provides the highest contrast on a light yellow background, meeting WCAG AA standards for readability.

Practice

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