# Tailwind Design

Tailwind CSS discipline for utility-first styling.

## Rules

1. **Design tokens in config, not magic numbers.** Spacing, colors, and font sizes come from `tailwind.config` — not arbitrary `p-[17px]` unless there's a specific reason.

2. **Extract components at repetition, not anticipation.** Three identical class strings become a component. Don't preemptively componentize a single use.

3. **Responsive prefixes mobile-first.** Base styles for mobile, `md:` and `lg:` for larger breakpoints. Desktop-first overrides are harder to reason about.

4. **Dark mode via `dark:` prefix.** Define both themes. Don't ship light-only and bolt dark mode on later.

5. **Use `@apply` sparingly.** Prefer utility classes in markup. `@apply` in CSS files hides the design system and makes components harder to scan.

6. **Purge unused classes in production.** Tailwind's content config must include all template paths. Misconfigured purge ships the entire CSS bundle.

## What This Replaces

Arbitrary values everywhere, component abstractions that hide the design system, and production CSS bundles bloated by misconfigured content paths.

## Official Source

Distilled from Vercel web design guidelines and Tailwind ecosystem patterns.
Full upstream: https://officialskills.sh/vercel-labs/skills/web-design-guidelines