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.

Practice

1. What does the Tailwind class bg-blue-500/50 do to the background color?

easy

A. Sets the background color to fully opaque blue

B. Sets the background color to blue with 5% opacity

C. Sets the background color to blue with 50% opacity

D. Sets the background color to blue with 100% opacity

Solution

1. Step 1: Understand the opacity modifier syntax

   The slash and number after the color (like /50) means opacity percentage in Tailwind.

2. Step 2: Interpret the number 50

   50 means 50% opacity, so the color is half transparent.

3. Final Answer:

   Sets the background color to blue with 50% opacity -> Option C

4. Quick Check:

   bg-blue-500/50 means 50% opacity [OK]

Hint: Slash number after color means opacity percent [OK]

Common Mistakes:

• Confusing 50 with 5 or 100
• Ignoring the slash and treating as normal color
• Thinking opacity is from 0 to 1 instead of 0 to 100

2. Which of these is the correct Tailwind class to apply 25% opacity on a red background?

easy

A. bg-red-500/25

B. bg-red-500-25

C. bg-red-25/500

D. bg-red-25

Solution

1. Step 1: Recall Tailwind opacity syntax

   Opacity is added after color with a slash, e.g., /25 for 25% opacity.

2. Step 2: Check each option

   Only bg-red-500/25 uses correct slash syntax and valid color code.

3. Final Answer:

   bg-red-500/25 -> Option A

4. Quick Check:

   Slash before opacity number is correct [OK]

Hint: Use slash before opacity number, not dash [OK]

Common Mistakes:

• Using dash instead of slash for opacity
• Putting opacity before color number
• Missing slash entirely

3. What will be the visible opacity of the text if the class text-green-700/75 is applied?

medium

A. 75% opacity (mostly visible)

B. 25% opacity (mostly transparent)

C. 100% opacity (fully visible)

D. 50% opacity (half visible)

Solution

1. Step 1: Understand the opacity value in the class

   The /75 means 75% opacity, so the color is mostly visible but slightly transparent.

2. Step 2: Match opacity to options

   75% opacity means mostly visible, not fully or half transparent.

3. Final Answer:

   75% opacity (mostly visible) -> Option A

4. Quick Check:

   text-green-700/75 means 75% opacity [OK]

Hint: Opacity number after slash equals percent visible [OK]

Common Mistakes:

• Mixing 75 with 25 or 50
• Thinking opacity means darkness instead of transparency
• Ignoring the slash and reading as normal color

4. You wrote bg-yellow-400/110 to set background opacity. What is wrong with this?

medium

A. Opacity must be a decimal like 1.10

B. Slash should be a dash

C. Yellow color does not support opacity

D. Opacity value cannot be more than 100

Solution

1. Step 1: Check valid opacity range

   Opacity in Tailwind must be between 0 and 100 inclusive.

2. Step 2: Analyze the given value 110

   110 is above 100, so it's invalid and will cause no effect or error.

3. Final Answer:

   Opacity value cannot be more than 100 -> Option D

4. Quick Check:

   Opacity max is 100, not above [OK]

Hint: Opacity max is 100, never above [OK]

Common Mistakes:

• Using values above 100
• Confusing slash with dash
• Thinking opacity can be decimal over 1

5. You want a button with a blue background that is fully visible normally but becomes 40% opaque on hover. Which Tailwind classes achieve this?

hard

A. bg-blue-600/100 hover:bg-blue-600

B. bg-blue-600 hover:bg-blue-600/40

C. bg-blue-600 hover:bg-blue-600-40

D. bg-blue-600/40 hover:bg-blue-600

Solution

1. Step 1: Set normal background fully visible

   Use bg-blue-600 for fully opaque blue background (default opacity 100%).

2. Step 2: Set hover background with 40% opacity

   Use hover:bg-blue-600/40 to apply 40% opacity on hover.

3. Step 3: Check other options for correctness

   bg-blue-600/100 hover:bg-blue-600 uses unnecessary /100 and full opacity on hover (no change), bg-blue-600/40 hover:bg-blue-600 reverses opacity states, bg-blue-600 hover:bg-blue-600-40 uses wrong syntax.

4. Final Answer:

   bg-blue-600 hover:bg-blue-600/40 -> Option B

5. Quick Check:

   Normal full opacity, hover with /40 opacity [OK]

Hint: Normal color no slash, hover with slash opacity [OK]

Common Mistakes:

• Using dash instead of slash for opacity
• Setting opacity on normal state instead of hover
• Using /100 opacity unnecessarily