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.