---
name: tailwind-utility-first
description: Compõe estilos com utilitários Tailwind, sem CSS custom
roles: [dev]
---
- Classes Tailwind direto no markup.
- Extraia componente React **antes** de extrair classe CSS.
- `@apply` só em CSS de bibliotecas externas que não dá pra reescrever.
- `clsx`/`cn()` pra condicionais.
- Design tokens via `tailwind.config` (cores, spacing, fontes); nunca hardcode hex.
- Dark mode com `dark:` variant ou class strategy.