The utility-first mindset
Why Tailwind composes tiny single-purpose classes instead of writing CSS — and how it changes how you build UIs.
What "utility-first" means
Tailwind gives you small, single-purpose utility classes — `p-4` (padding), `bg-indigo-500` (background), `rounded-lg` (corners) — that you compose directly in your markup. Instead of inventing class names and jumping to a stylesheet, you describe the result inline, right where the element lives.
It feels verbose at first. Then it clicks: you stop naming things, stop context-switching between files, and the styles stay colocated with the markup they affect. A developer reading your JSX can see every visual decision without opening a CSS file.
A Tailwind utility class like `p-4` maps to…
The composition pattern
Real components aren't one utility — they're a composed set of spacing, color, typography, border, and effect utilities. A button might be `px-6 py-2 bg-indigo-500 text-white font-semibold rounded-lg shadow-sm hover:bg-indigo-600`.
When the same set appears repeatedly, you extract it — Tailwind v4 encourages extracting components in your framework (React/Vue components, Blade partials, template includes), not in CSS. The template is the single source of truth.
CSS component class
- Styles live
- In a separate .css file
- Naming
- You invent a class name
- Reuse
- Apply the class anywhere
- Changes
- Edit CSS, may affect many places
Utility composition
- Styles live
- Inline in the template
- Naming
- No names needed
- Reuse
- Extract a framework component
- Changes
- Edit the component, scoped
When you reuse the same set of utilities across many places, Tailwind's recommended approach is to…