Opacity modifiers on colors in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does an opacity modifier do in Tailwind CSS?

It changes how transparent a color looks, making it see-through to some degree.

beginner

How do you apply 50% opacity to a background color in Tailwind?

Use a color with an opacity suffix like bg-blue-500/50 where /50 means 50% opacity.

beginner

What range of values can you use for opacity modifiers in Tailwind?

You can use values from 0 to 100, where 0 is fully transparent and 100 is fully opaque.

intermediate

True or False: Opacity modifiers affect only the color, not the whole element.

True. Opacity modifiers like /50 change only the color's transparency, not the entire element's opacity.

beginner

How would you write a red text color with 30% opacity in Tailwind?

Use text-red-500/30 to make the red text 30% opaque (70% transparent).

What does bg-green-400/75 mean in Tailwind CSS?

A Green background with no opacity

B Green background with 75% opacity

C Green background with 100% opacity

D Green background with 25% opacity

The /75 means 75% opacity, so the green background is mostly solid but slightly transparent.

Which opacity modifier makes a color fully transparent?

A /0

B /50

C /100

D /25

/0 means 0% opacity, which makes the color fully transparent (invisible).

Can you use opacity modifiers on text color in Tailwind?

A Only on borders

B No, only background colors support opacity

C Only with extra plugins

D Yes, like <code>text-blue-600/40</code>

Opacity modifiers work on text colors too, for example text-blue-600/40 sets 40% opacity on the text color.

What happens if you omit the opacity modifier on a Tailwind color class?

A The color uses 50% opacity by default

B The color is fully transparent

C The color is fully opaque (100%)

D The color becomes grayscale

Without an opacity modifier, Tailwind colors are fully opaque by default.

Which of these is a valid Tailwind opacity modifier?

A /25

B /110

C /-10

D /abc

Opacity modifiers must be between 0 and 100. /25 is valid; others are invalid.

Explain how opacity modifiers work on colors in Tailwind CSS and give an example.

Think about how you make a color partly see-through.

Describe the difference between using opacity modifiers on colors versus using the CSS opacity property on an element.

Consider what parts become transparent in each case.