---
description: Tailwind CSS v4 rules
globs: ["**/*.tsx", "**/*.jsx", "**/*.css"]
alwaysApply: true
---

- Tailwind v4 with CSS-first config via `@theme {}`. No `tailwind.config.ts`.
- Never hard-code colors. Reference design tokens via utilities (`bg-brand-500`) or `var(--color-brand-500)`.
- No inline `style={{ ... }}` for things Tailwind already handles.
- Use `cn()` / `clsx()` for conditional classes.