# 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 { ... }`.

```css
@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.