Opacity modifiers on colors in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Using opacity modifiers in Tailwind CSS

Which Tailwind CSS class correctly applies a blue background color with 50% opacity?

A bg-opacity-50-blue-500

B bg-blue-500/50

C bg-blue-500 opacity-50

D bg-blue-500 opacity50

💡 Hint

Tailwind uses a slash (/) to add opacity to colors.

In Tailwind CSS, you add opacity to colors by appending a slash and the opacity value (0-100) after the color class, like bg-blue-500/50 for 50% opacity.

Option B is invalid syntax, C applies opacity to the whole element, not just background color, and D is not a valid class.

❓ rendering

intermediate

Visual effect of opacity modifiers

What will you see if you apply the class bg-red-600/30 to a div with white text on a black background?

Tailwind

<div class="bg-red-600/30 text-white p-4">Hello</div>

A White background with red text

B Solid red background with white text on black

C Black background with white text, no red visible

D A semi-transparent red background behind white text on black

💡 Hint

Opacity modifies the background color transparency, not the text color.

The class bg-red-600/30 sets the background color to red with 30% opacity, so the black background behind will show through, making the red appear transparent. The white text remains fully opaque.

🧠 Conceptual

advanced

Difference between opacity utilities and opacity modifiers on colors

Which statement correctly explains the difference between opacity-50 and bg-blue-500/50 in Tailwind CSS?

A <code>opacity-50</code> sets the opacity of the entire element including text, while <code>bg-blue-500/50</code> sets only the background color opacity.

B <code>opacity-50</code> sets background color opacity, <code>bg-blue-500/50</code> sets text opacity.

C <code>opacity-50</code> sets text color opacity, <code>bg-blue-500/50</code> sets border opacity.

D Both classes do the same thing and can be used interchangeably.

💡 Hint

Think about what parts of the element each class affects.

opacity-50 changes the opacity of the entire element, including text and children, making everything semi-transparent.

bg-blue-500/50 changes only the background color's opacity, leaving text and other content fully opaque.

❓ selector

advanced

Selecting elements with opacity modifiers in Tailwind

Given this HTML, which CSS selector targets only elements with a background color opacity of 40% using Tailwind's opacity modifier syntax?

Tailwind

<div class="bg-green-400/40">Green</div>
<div class="bg-green-400/50">Green</div>
<div class="bg-green-400">Green</div>

A [class*='bg-green-400/40']

B .bg-green-400-40

C .bg-green-400\/40

D [class='bg-green-400/40']

💡 Hint

Remember how special characters like slash are escaped in CSS selectors.

In CSS, the slash character (/) must be escaped with a backslash when used in class selectors. So .bg-green-400\/40 correctly targets elements with that class.

Option C matches any class containing the string, but could match unintended classes. Option C is invalid syntax. Option C matches only exact class attribute, which is fragile.

❓ accessibility

expert

Accessibility considerations with opacity modifiers on colors

Why should you be careful when using low opacity background colors like bg-gray-900/10 behind text in Tailwind CSS?

A Low opacity backgrounds can reduce contrast, making text hard to read for users with visual impairments.

B Low opacity backgrounds increase page load time significantly.

C Low opacity backgrounds disable keyboard navigation on the element.

D Low opacity backgrounds cause screen readers to ignore the text.

💡 Hint

Think about how opacity affects color contrast and readability.

Using very transparent backgrounds can lower the contrast between text and background, which can make reading difficult for people with low vision or color blindness.

Good accessibility practice requires sufficient contrast to ensure text is readable by everyone.

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