Transparent Colors

In the CSS course, you made colors transparent with an alpha, for example rgba(71, 105, 88, 0.2) or rgb(255 0 0 / 50%). In Tailwind, you write a slash and a number after the color: its opacity in percent, from 0 (fully transparent) to 100 (opaque). Tailwind calls it the opacity modifier:

(Tailwind's exact CSS gets there in a different way, but the color is the same.) Multiples of 5 or 10 are the most common, but any number from 0 to 100 works. And there's one more color, transparent: bg-transparent makes a background fully transparent.

A transparent color lets whatever is behind it show through. That's handy when the color behind it isn't always the same. For example, a bg-black/50 background laid over a photo darkens it, so that white text on top is easy to read. And a light transparent tint fits on any background:

a highlighted word a highlighted word a highlighted word

We'll use it like a highlighter pen: the words "ready for a new home" in the adoption paragraph are in a strong element, and they'll get a light orange background through which the page shows.

The slash makes only that one color transparent. To fade a whole element with everything in it, CSS has the opacity property, which you know from the CSS course; you'll meet its classes in the lesson on borders, shadows and images.