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 or ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access