Step 7
Step 7 — Tailwind CSS
25 min
Step 7 — Tailwind CSS
Style with utility classes in your markup — no separate CSS file. Once it clicks, your design becomes token-driven and consistent.
Same card, two ways
Traditional CSS:
.card { padding: 16px; border-radius: 12px; background: white; }
<div class="card">…</div>
Tailwind:
<div class="p-4 rounded-xl bg-white shadow">…</div>
Same length, no extra file, and the markup tells you the appearance.
Five categories you'll use daily
- Spacing:
p-4,m-2,gap-3 - Sizing:
w-full,max-w-3xl,h-screen - Layout:
flex,grid grid-cols-3,items-center,justify-between - Typography:
text-lg,font-semibold,leading-relaxed - Color:
text-sky-600,bg-slate-50,border-gray-200
Tokens — the heart of Tailwind v4
@theme {
--color-cs-primary: #0EA5E9;
--radius-cs-lg: 16px;
}
This auto-generates bg-cs-primary, rounded-cs-lg, etc. — your design system in one file.
Responsive prefixes
<div class="text-base md:text-lg lg:text-xl">…</div>
md: ≥ 768px, lg: ≥ 1024px. Mobile-first, then scale up.
Try it
Add Tailwind classes to the step 5 Counter:
<button
onClick={() => setN(n + 1)}
className="px-4 py-2 rounded-lg bg-sky-500 text-white hover:bg-sky-600"
>
Clicked: {n}
</button>
Next
Step 8 wraps up with form validation and loading UX.