Utilities map to CSS

Every utility maps to CSS.

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

The generated rules correspond to familiar declarations:

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

Some utilities use theme variables rather than copying a literal value. p-4 is connected to Tailwind’s spacing system, while text-gray-700 resolves through a color token. This is why changing a theme token can update many utility uses consistently.

Variants wrap or qualify the same rule:

<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 matches the hover condition
• md:p-8 applies from the md minimum width upward and replaces the base padding there

Avoid conflicting utilities for the same property and condition:

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

The winning rule follows Tailwind’s generated stylesheet and CSS cascade, not a promise that the last class in the HTML string wins. Express one decision per property at a given state, or use an explicit variant when the value should change.

Utilities can also collaborate on one CSS feature. translate-x-2, rotate-3, and scale-95 contribute transform values. Removing one does not necessarily remove the others.

When a class is unfamiliar, inspect the matched rule and computed value in DevTools. Ask which property, selector, media query, or custom property it represents.

Your action is to inspect the example at widths below and above md. Record the matched padding rules, cross one out in DevTools, and explain the winner using CSS conditions and cascade rather than class-string order.