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.