Tailwind CSS Backgrounds
Tailwind CSS provides a powerful set of utilities for controlling an element's background, ranging from solid colors and gradients to complex background image configurations.
Background Color
Use bg-{color}-{shade} to set the background-color. Tailwind's color palette is extensive and consistent across all utilities.
In the example above, background colors are applied using the bg-{color}-{shade} convention. The color represents the hue (like blue or slate), and the shade represents the intensity on a scale from 50 (lightest) to 950 (darkest). The default stops for the shade are 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 (which means you'll need to use one of those values when specifying the shade).
Beyond the standard palette, Tailwind CSS allows you to hook directly into custom values and CSS variables without leaving your HTML:
- Arbitrary Values: Arbitrary value classes such as
bg-[#ff5733]orbg-[rgb(255,87,51)]allow you to use any valid CSS color value directly. - Custom Properties: Custom property values such as
bg-(--brand-color)map the background to a CSS variable defined in your stylesheet.
There are also several functional classes for specific layout behaviors:
| Utility | Effect |
|---|---|
bg-transparent |
Sets the background to fully clear. |
bg-current |
Sets the background color to match the current text color (currentColor). |
bg-inherit |
Inherits the background color from the parent element. |
bg-white / bg-black |
Direct shortcuts for pure white (#fff) and pure black (#000). |
Gradients
Creating linear gradients is simple with Tailwind. You specify the direction and then use "from", "via", and "to" utilities to define the colors.
bg-gradient-to-r: Gradient to the right.bg-gradient-to-tr: Gradient to the top-right.from-blue-500: Starting color.via-purple-500: Middle color (optional).to-pink-500: Ending color.
Gradients
If you've used any of the earlier versions of Tailwind CSS, you'll notice that Tailwind now has a more intuitive syntax for gradients, moving from bg-gradient-to-r to bg-linear-to-r. This aligns closer to native CSS linear-gradient() and radial-gradient() functions.
Linear Gradients
Linear gradients are defined by a direction and a series of color stops (from, via, and to).
| Utility | Direction | Modern Example |
|---|---|---|
bg-linear-to-r |
Left to Right | bg-linear-to-r from-blue-500 to-teal-400 |
bg-linear-to-t |
Bottom to Top | |
bg-linear-to-tr |
Bottom-left to Top-right | |
bg-linear-[angle] |
Arbitrary (e.g., 135deg) |
Radial & Conic Gradients
In v4.x, radial and conic gradients are now first-class utilities, allowing for centered or positioned circular transitions.
| Type | Utility | Description |
|---|---|---|
| Radial | bg-radial |
A circular gradient originating from the center. |
| Positional | bg-radial-at-t |
Originates from the top (also -b, -l, -r). |
| Conic | bg-conic-{angle} |
A "color wheel" transition around a center point. |
Advanced Controls
For high-performance or dynamic designs, you can use arbitrary values and custom properties:
- Color Stop Positions:
from-10%orvia-35%to control exactly where colors blend. - Custom Interpolation:
bg-linear-(--my-gradient-var)to use a gradient defined in your CSS variables. - Arbitrary Stops:
from-[#ff5733]for specific hex codes not in your theme.
Background Image & Sizing
Tailwind CSS provides various bg-* utilities that allow you to control CSS properties like background-image, background-size, and background-position. Let's take a look.
Applying a Background Image
Tailwind provides three ways to apply an image: using arbitrary URLs, CSS variables, or theme utilities.
| Method | Class Example | Description |
|---|---|---|
| Arbitrary URL | bg-[url('/img/hero.jpg')] |
Directly links to a path or external URL. |
| CSS Variable | bg-(--hero-image) |
References a variable defined in your @theme or inline style. |
| Theme Utility | bg-hero-pattern |
References a name defined in your CSS @theme block. |
Example Implementation
Here's an example of a centered, full-cover background image using only Tailwind classes:
Once a background image is applied, the following utilities can be used to control its scale, position, and repeat behavior to ensure it looks correct on any screen size.
Background Size
These utilities determine how the image should scale to fit the element's dimensions.
| Utility | CSS Property | Behavior |
|---|---|---|
bg-cover |
background-size: cover; |
Resizes image to fill the container, cropping if necessary. |
bg-contain |
background-size: contain; |
Resizes image to be fully visible, leaving empty space if needed. |
bg-auto |
background-size: auto; |
Displays the image at its original size. |
bg-[<value>] |
background-size: custom; |
Custom arbitrary sizing (e.g., bg-[auto_200px]). |
bg-[<custom-property>] |
background-size: var(--custom-property); |
Custom arbitrary sizing using a CSS custom property (e.g., bg-[--my-size]). |
Background Position
You can use the following utilities to control where the image is anchored within the container:
| Utility | Anchor Point | Logical Equivalent |
|---|---|---|
bg-center |
Center | — |
bg-top / bg-bottom |
Top / Bottom | — |
bg-left / bg-right |
Left / Right | bg-start / bg-end |
bg-[<value>] |
Custom | Example: bg-[center_top_1rem] |
bg-[<custom-property>] |
Custom | Example: bg-[--my-position] |
Repeat & Attachment
You can use utilities like bg-repeat to tile an image, or bg-no-repeat to show it once. Patterns can be restricted to one axis with bg-repeat-x or bg-repeat-y.
The bg-fixed utility keeps the image static during scroll, which can help when creating a parallax effect. The bg-local utility scrolls the image with the element's content, and bg-scroll (default) scrolls it with the main viewport.
Example
In the next page, we'll look at Borders and Rounded Corners.