Background color utilities in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the Tailwind CSS class bg-blue-500 do?

It sets the background color of an element to a medium shade of blue from Tailwind's default color palette.

beginner

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

Use the class bg-gray-100 to apply a very light gray background color.

intermediate

What is the purpose of the <code>bg-opacity-50</code> class in Tailwind CSS?

It sets the background color opacity to 50%, making the background semi-transparent.

intermediate

How can you change the background color on hover using Tailwind CSS?

Use the hover:bg-colorname-shade class, for example hover:bg-red-400 changes background to red when hovered.

beginner

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

It makes the background fully transparent, showing whatever is behind the element.

Which Tailwind class sets a red background color?

A bg-red-500

B text-red-500

C border-red-500

D hover:text-red-500

bg-red-500 sets the background color to red. The others affect text color or border color.

How do you make a background color semi-transparent in Tailwind?

A text-opacity-50

B bg-opacity-50

C bg-transparent

D opacity-50

bg-opacity-50 changes only the background opacity. opacity-50 affects the whole element.

What does hover:bg-green-300 do?

A Changes text color to green when hovered

B Changes border color to green when hovered

C Sets background green permanently

D Changes background to green when hovered

This class changes the background color to green shade 300 only on hover.

Which class makes the background fully transparent?

A bg-transparent

B bg-white

C bg-opacity-0

D opacity-0

bg-transparent sets background to transparent. bg-opacity-0 requires a background color class first.

If you want a dark gray background, which class is best?

A bg-gray-100

B bg-gray-200

C bg-gray-800

D bg-gray-400

Higher numbers like 800 mean darker shades in Tailwind's gray palette.

Explain how to use Tailwind CSS classes to change an element's background color and make it change on hover.

Think about how you can combine normal and hover states with Tailwind classes.

Describe how background opacity works in Tailwind CSS and how it differs from overall element opacity.

Consider what parts of the element are affected by each opacity class.