Example 2: Addressing the "Gotcha" - Opacity vs. Background Opacity

The "Gotcha": `opacity-*` Affects Everything

When `opacity-*` (e.g., `opacity-60`) is applied to an element, it affects the entire element, including its background, text, and any child elements. This can make text hard to read if you only wanted a semi-transparent background.

Text inside `opacity-60` div

This text is also 60% opaque, just like the indigo background. This is often not the desired effect for readability.

The Solution: Background Opacity Utilities

To make only the background semi-transparent while keeping the text and child elements fully opaque, use background opacity utilities like `bg-color/opacity` (e.g., `bg-indigo-600/60`) or `bg-color bg-opacity-*` (e.g., `bg-indigo-600 bg-opacity-60`).

Text inside `bg-indigo-600/60` div

This text is fully opaque, while the indigo background is 60% opaque. This is usually the desired effect for overlays or subtle backgrounds.

Another way to achieve the same result (older Tailwind syntax or for more complex scenarios):

Text inside `bg-teal-700 bg-opacity-50` div

This text is also fully opaque. The teal background has 50% opacity using `bg-opacity-50`.

Practical Use: Image Overlay

Placeholder Image

Overlay Text (Readable)