Background Style
Learn how to use different background colors and shadows.
We'll cover the following
Background color
Tailwind’s background color is similar to text color and border color—the pattern is .bg-{color}
with the same color names the other groups use, such as .bg-red-700
or .bg-orange-300
. Tailwind also provides .bg-opacity-{level}
that follows the same steps as text opacity.
Shadows
A box-shadow is technically not a background color, but it’s used like one. Tailwind provides a few utilities to manage the box-shadow. The base utility, .shadow
, effectively creates a 3-pixel wide, 10% opacity black border that’s vertically offset by 1-pixel vertically. We can then make that smaller with the xs
and sm
modifiers, or bigger with themd
, lg
, xl
, and 2xl
modifiers. For example, we can write .shadow- sm
, .shadow-xl
, and so on.
We can have a small inset shadow with the .shadow-inner
class, which makes the element look like it’s lower than the rest of the screen. There are no size variants. We can cancel all of these with .shadow-none
. As we can see in the following example, it’s a pretty subtle effect unless we make it large:
Get hands-on with 1400+ tech skills courses.