Tailwind Background and Gradient Classes to CSS

Tailwind Background Utilities in CSS

Beyond solid colors, Tailwind provides utilities for gradients, background images, sizing, positioning, and repetition. These map to standard CSS background properties.

Gradient Direction

/* bg-gradient-to-r */
background-image: linear-gradient(to right, var(--tw-gradient-stops));

/* bg-gradient-to-br */
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));

/* bg-gradient-to-t */
background-image: linear-gradient(to top, var(--tw-gradient-stops));

In Tailwind, gradient colors are set with from-*, via-*, and to-* classes that populate the --tw-gradient-stops CSS variable. When converting to plain CSS, you replace the variable with actual color values.

Background Sizing

/* bg-cover */
background-size: cover;

/* bg-contain */
background-size: contain;

Background Position

/* bg-center */
background-position: center;

Background Repeat

/* bg-no-repeat */
background-repeat: no-repeat;

/* bg-repeat */
background-repeat: repeat;

/* bg-repeat-x */
background-repeat: repeat-x;

Background Attachment

/* bg-fixed */
background-attachment: fixed;

/* bg-scroll */
background-attachment: scroll;

Combining Properties

A common hero section pattern in Tailwind: bg-cover bg-center bg-no-repeat bg-fixed translates to:

background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;