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.