Utilities map to CSS

Every Tailwind utility maps to one or more CSS declarations. Once you see the mapping, class names stop being something to memorize and start being predictable.

Take this element:

<div class="block w-full p-4 text-center">Hello</div>

Tailwind generates rules that correspond to declarations you already know:

display: block;
width: 100%;
padding: 1rem;
text-align: center;

block is display: block. w-full is width: 100%. p-4 is padding: 1rem. text-center is text-align: center. Four classes, four declarations.

Some utilities go through the theme

Not every utility copies a literal value. p-4 reads from Tailwind’s spacing scale, and text-gray-700 resolves through a color token. In the generated CSS you’ll see calc(var(--spacing) * 4) and var(--color-gray-700) instead of hardcoded numbers. This is why changing a theme token updates every place that uses it.

Variants wrap the same rule

A variant is a prefix that adds a condition to a utility:

<div class="p-4 hover:bg-gray-100 md:p-8">...</div>

• p-4 applies at every viewport size
• hover:bg-gray-100 applies while the element is hovered
• md:p-8 applies from the md breakpoint (48rem) upward, and replaces the base padding there

The rule inside is the same. The variant only wraps it in a media query or a pseudo-class selector.

Conflicting utilities

Be careful with two utilities that set the same property under the same condition:

<div class="p-2 p-6">...</div>

You might expect the last class in the string to win. It doesn’t work like that. The winner is decided by the order of the rules in Tailwind’s generated stylesheet and by the CSS cascade. The class order in your HTML has no effect. Express one decision per property, and use a variant when the value should change under a condition.

Some utilities also collaborate on one CSS property. translate-x-2, rotate-3, and scale-95 each contribute a piece of the transform. Removing one leaves the others in place.

When a class is unfamiliar, inspect the element in DevTools and read the matched rule. Ask yourself which property, selector, media query, or custom property it represents. Try it now with the padding example: resize the window below and above 48rem, look at which padding rule is matched, and explain the winner using cascade and media queries rather than class-string order.