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.