Tailwind is a design system, not just shortcuts

The single biggest misconception about Tailwind: "it is just short class names for CSS". Wrong. Tailwind's real value is that every utility pulls from a fixed set of design tokens — a curated color palette, a spacing scale, a type scale. When the whole team picks from the same small menu, every page looks like it was designed by one person.

This lesson teaches you the three core scales you will use in every single component.

1. The color palette

Tailwind ships 22 color families, each with 11 shades from 50 (nearly white) to 950 (nearly black):

slate  gray  zinc  neutral  stone          ← grays (pick ONE per project)
red  orange  amber  yellow  lime  green  emerald  teal
cyan  sky  blue  indigo  violet  purple  fuchsia  pink  rose

You apply a color with a prefix that says where it goes:

How professionals pick shades

• Page background: 50 or 100 (light mode), 900/950 (dark mode)
• Cards: white on a slate-50/slate-100 page — the contrast is the border
• Primary text: slate-900, secondary text: slate-500 — never pure black
• Buttons / brand: 600 as the base, 500 on hover (hover:bg-teal-500), 700 for active
• Subtle badges: 100 background + 700 text of the same family (bg-teal-100 text-teal-700)

That last trick — same family, far-apart shades — produces accessible, professional color pairs automatically.

Opacity modifier

Any color accepts /opacity: bg-teal-600/20 means teal-600 at 20% opacity. Great for tinted overlays and glows: bg-black/50 is the classic modal backdrop.

2. The spacing scale

Every padding, margin, gap, width and height utility uses one shared numeric scale. Each unit = 0.25rem = 4px:

The directional system works for both padding (p) and margin (m):

• p-4 — all four sides
• px-4 / py-4 — horizontal / vertical pair
• pt-4, pr-4, pb-4, pl-4 — single side
• -mt-4 — negative margin (pull an element upward, e.g. an avatar overlapping a cover photo)

space-x / space-y — margins between siblings

space-y-4 on a parent puts margin-top: 1rem on every child except the first. It is the fastest way to space a vertical stack without touching each child:

<div class="space-y-4">
  <p>Paragraph one</p>
  <p>Paragraph two</p>   <!-- automatically gets top margin -->
  <p>Paragraph three</p> <!-- automatically gets top margin -->
</div>

(For flex/grid layouts you will usually prefer gap-4 — next lesson.)

3. Sizing

The most reused layout recipe in all of Tailwind: max-w-7xl mx-auto px-4 — a centered page container with side padding. mx-auto centers any element that has a width limit.

4. Typography

Two combinations worth memorising because they appear in every real project:

• Hero heading: text-4xl font-extrabold tracking-tight text-slate-900
• Overline label: text-xs font-bold uppercase tracking-widest text-teal-600 (the tiny label above a heading — you saw it on the Lesson 1 card)

5. Borders, radius, shadows

• border = 1px solid; border-2, border-4 for thicker; color with border-slate-200
• rounded → rounded-md → rounded-lg → rounded-xl → rounded-2xl → rounded-full (circles/pills)
• shadow-sm → shadow → shadow-md → shadow-lg → shadow-xl → shadow-2xl
• ring-2 ring-teal-500 ring-offset-2 — outline-style ring that does not shift layout (used for focus states and "selected" cards)

Depth recipe used by basically every modern UI: card = bg-white rounded-xl shadow-sm border border-slate-200, and on hover hover:shadow-md. Subtle beats dramatic.

Common beginner mistakes

• Random shade jumps — mixing text-gray-400 here and text-zinc-600 there. Pick one gray family and 2–3 shades; consistency is the whole point.
• Pixel-perfect obsession — reaching for w-[273px] when w-64 + a max-width does the job. Arbitrary values are an escape hatch, not the default.
• Pure black text (text-black) — real UIs use text-slate-900/800; softer contrast reads better on screens.
• Shadow + no rounding — shadows look wrong on sharp corners. If it floats, round it.

Practice task

In the editor: (1) change the pricing card's accent family from teal to violet everywhere (badge, price, button, ring), (2) bump the plan name from text-lg to text-xl, (3) add hover:shadow-lg to the card. Notice you never left the HTML.