Typography & color

Typography in Tailwind flows through four utility families: font size (`text-xs` through `text-9xl`), font weight (`font-thin` through `font-black`), line height (`leading-none` through `leading-loose`), and letter spacing (`tracking-tighter` through `tracking-widest`).

The common stack for readable body text: `text-base leading-relaxed`. For headings: `text-2xl font-bold tracking-tight`. All of these can be adjusted per breakpoint with responsive prefixes.

Color utilities follow the pattern `property-color-shade`: `bg-teal-500`, `text-slate-300`, `border-rose-500`. The shade scale runs 50 (lightest, almost white) → 500 (mid-tone, the 'pure' color) → 950 (darkest, almost black). Pairing a mid-tone background (400–600) with a high-contrast text shade (50 or 900+) is the everyday pattern.

For text on colored backgrounds, use `text-white` or `text-<color>-50` for light text on dark backgrounds, and `text-<color>-900` for dark text on light backgrounds. The `ring-*` utility uses the same color palette for focus rings.

Borders come in three parts: width (`border`, `border-2`, `border-4`), color (`border-gray-300`, using the same shade scale), and style (default is solid; use `border-dashed` or `border-dotted` for alternatives). You can target individual sides with `border-t-*`, `border-r-*`, etc.

Border-radius uses a named scale that's independent of the spacing scale: `rounded-sm` (2px), `rounded` (4px), `rounded-md` (6px), `rounded-lg` (8px), `rounded-xl` (12px), `rounded-2xl` (16px), `rounded-3xl` (24px), `rounded-full` (circle/pill).