Gotcha: Element Opacity vs. Background Opacity

Problem: opacity-* affects children

Parent: opacity-50

This text is also 50% transparent because its parent has opacity-50 .

Here, opacity-50 is applied to the purple box. Notice how the text inside it also becomes semi-transparent. This is often not the desired effect if you only want a transparent background.

Solution: Background Opacity Utilities

Parent: bg-purple-600/50

This text is fully opaque, even though the background is 50% transparent!

Here, bg-purple-600/50 is used. This applies 50% opacity to the background color *only*, leaving the text content fully opaque. This is the correct way to achieve a see-through background without affecting child elements' opacity.