Utility-First Workflow

Tailwind CSS takes a radically different approach to styling. Instead of writing custom CSS classes like .card-title or .btn-primary, you compose designs directly in your markup using small, single-purpose utility classes.

Why Utility-First?

Traditional CSS encourages you to create abstractions early. You name things, group styles into classes, and hope the names stay relevant as designs evolve. In practice, this leads to bloated stylesheets full of dead or duplicated CSS.

With utility-first CSS:

• No naming fatigue — you never agonize over class names.
• No dead CSS — utilities are only included if used.
• Local reasoning — you see exactly what an element looks like by reading its classes.
• Safe changes — editing one element never accidentally breaks another.

Common Utility Classes

Here is a practical example that uses many of the most common utilities:

Breaking this down:

Responsive Prefixes

Tailwind uses a mobile-first breakpoint system. Unprefixed utilities apply at all screen sizes; prefixed utilities apply at that breakpoint and above.

Default breakpoints:

You can also use max-* variants for max-width breakpoints:

<p class="max-md:text-center md:text-left">
  Centered on small screens, left-aligned on medium and up.
</p>

State Variants

Tailwind provides variants for every interactive and structural state:

Common state variants include hover:, focus:, active:, disabled:, first:, last:, odd:, even:, group-hover:, and peer-*:.

Combining Variants

Variants can be stacked. They read left to right — "on medium screens, when hovered":

<button class="bg-blue-600 md:hover:bg-blue-800 text-white px-4 py-2 rounded">
  Save
</button>

Arbitrary Values

When Tailwind's default scale does not have the exact value you need, use square brackets:

<div class="top-[117px] bg-[#1a1a2e] text-[clamp(1rem,2.5vw,2rem)]">
  Custom values
</div>

This keeps you in the utility workflow without dropping into a CSS file.