Text color utilities in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the Tailwind CSS utility class to change text color to red?

Use text-red-500 to set the text color to a medium red shade in Tailwind CSS.

beginner

How do you apply a light gray text color using Tailwind CSS?

Use text-gray-300 to apply a light gray color to text.

intermediate

What does the class text-transparent do in Tailwind CSS?

It makes the text fully transparent, so the text is invisible but still takes up space.

intermediate

How can you change text color on hover using Tailwind CSS?

Use the hover prefix like hover:text-blue-600 to change text color when the mouse is over the element.

beginner

Why is it important to consider color contrast when using text color utilities?

Good color contrast ensures text is readable for everyone, including people with vision impairments, improving accessibility.

Which Tailwind class sets the text color to green?

A border-green-500

B bg-green-500

C hover:text-green-500

D text-green-500

text-green-500 sets the text color to green. bg- changes background, border- changes border color, and hover:text- applies color on hover.

What does text-gray-700 do?

A Sets text color to a dark gray

B Sets background color to gray

C Makes text bold

D Makes text italic

text-gray-700 applies a dark gray color to the text.

How do you make text color change only when hovered in Tailwind?

A emanroloc-txet:revoh

B text-hover-color

C hover:text-colorname

D hover:text-color

Use hover:text-colorname where colorname is the color you want on hover.

Which class makes text invisible but still takes up space?

A text-hidden

B text-transparent

C invisible

D hidden

text-transparent makes text invisible but keeps its space. invisible hides the whole element visually but keeps space. hidden removes element from layout.

Why should you avoid low contrast text colors?

A They are hard to read for many users

B They break the layout

C They load slower

D They look boring

Low contrast text is hard to read, especially for people with vision difficulties, reducing accessibility.

Explain how to use Tailwind CSS to change text color and how to make it change on hover.

Think about how you add color classes and how hover states work in Tailwind.

Describe why color contrast is important when choosing text colors in web design.

Consider who might have trouble reading low contrast text.

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