# tailwind

Tailwind CSS v4 conventions: CSS-first config via @theme, no tailwind.config.ts, design tokens as CSS vars.

```bash
npx rulepack add tailwind
```

## What it covers

- CSS-first setup with `@import "tailwindcss"` and `@tailwindcss/postcss` — no `tailwind.config.ts` / `.js`
- Design tokens declared in `@theme { ... }` and referenced via generated utilities (`bg-brand-500`) or `var(--color-brand-500)`
- No hard-coded design tokens (e.g. `#7452fc`) in JSX or CSS — always go through the variable
- Utility-first authoring: utilities in JSX, `cn()` / `clsx()` for conditional classes, `@apply` only when a class set repeats 3+ times
- Anti-patterns to avoid: JS config files, inline `style={{ ... }}`, hard-coded colors, long `@apply` chains

## Source

Rules align with the official Tailwind CSS v4 documentation: https://tailwindcss.com/docs

## License

MIT