Tailwind CSS v4 — Claude Code rules

Setup

• Use Tailwind v4 with @tailwindcss/postcss. No tailwind.config.ts / .js.
• Define design tokens in globals.css (or an equivalent entry) using @theme { ... }.

@import "tailwindcss";

@theme {
  --color-brand-500: #7452fc;
  --font-display: "Inter", system-ui, sans-serif;
}

• Reference tokens with the generated utilities (bg-brand-500) and from raw CSS with var(--color-brand-500).
• Don't hard-code design tokens (e.g., #7452fc) anywhere in JSX or CSS — always go through the variable.

Authoring

• Use utility classes directly in JSX. No @apply in component CSS unless the same class set is reused 3+ places.
• Use cn() / clsx() for conditional classes. Never string-concatenate.
• Order roughly: layout → spacing → typography → color → state.

Anti-patterns

• ❌ tailwind.config.ts (use @theme).
• ❌ Inline style={{ ... }} for what Tailwind already handles.
• ❌ Hard-coded colors.
• ❌ Long @apply chains in component CSS.