Modern CSS with Tailwind, 2nd Edition

Background Color

Tailwind’s background color is similar to text color and border color: the pattern is bg-{color}, and uses the same color names as the other groups (bg-red-700 or bg-orange-300). Tailwind also provides bg-{color}/{opacity} with the same steps as text opacity. As in other places, you can use arbitrary values via square brackets for the color (bg-[#cdcdcd]) or the opacity (bg-red-700/[43]).

Shadows

Technically, a box shadow isn’t a background color, but it’s sort of used like one. Tailwind provides a few utilities to manage the box shadow. The base utility, shadow, effectively creates a 10% opacity black border that’s 1-pixel vertically offset, with a 3-pixel width. You can then make that smaller with the xs and sm modifiers ...