The Utility-First Idea
See how many small classes compose into one component.
The heart of Tailwind is composition: you build a component out of many tiny classes rather than one big custom rule.
The card below combines spacing, color, radius, and shadow utilities. Each is reusable and predictable, and together they form a complete design.
Example
Loading editor…
Press Run to see the result.
When to use it
- A frontend developer builds an alert banner by composing a dozen small utilities rather than authoring a .alert CSS class.
- A team achieves pixel-perfect parity with a Figma mockup by mapping each design token directly to a Tailwind utility class.
- A legacy project component is refactored from a tangled BEM stylesheet to readable utility-composed markup with no behavioral changes.
More examples
Compose utilities into a badge
Multiple utility classes compose a complete badge component covering layout, color, typography, spacing, and shape with no custom CSS.
<span class="inline-flex items-center bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">
Active
</span>Alert component from utilities
A warning alert is assembled from flex, gap, background, border, text, corner, and padding utilities without a single bespoke class.
<div class="flex items-start gap-3 bg-yellow-50 border border-yellow-300 text-yellow-800 rounded p-4">
<strong>Warning:</strong>
<p>Your session will expire in 5 minutes.</p>
</div>Profile card via composition
A profile card shows how composing flex, sizing, spacing, color, and shadow utilities replaces a dedicated component CSS class.
<div class="flex items-center gap-4 p-4 bg-white shadow rounded-lg">
<img class="w-12 h-12 rounded-full" src="avatar.jpg" alt="">
<div>
<p class="font-semibold text-gray-900">Jane Doe</p>
<p class="text-sm text-gray-500">Product Designer</p>
</div>
</div>
Discussion