Tailwind acelera o delivery, porém sem padrões claros a UI degrada rápido. Estas são as regras que adoto para manter UX escalável.
1) Tokens primeiro, utilitários depois
1) Tokens primeiro, utilitários depois
- Padronize cores, espaçamentos e tipografia no tailwind.config (theme, extend).
- Diga "não" a valores arbitrários no dia a dia; permita exceções raras e documentadas.
- Essência: tokens = linguagem do design.
#2) Componentes com variáveis de estilo
- Crie componentes com variantes (ex.: Button, Card, Badge) usando libs como class-variance-authority ou padrões utilitários.
- Evite reescrever 10 util classes toda hora; extraia padrões frequentes.
## 3) Layouts previsíveis
- Defina escalas de max-w, container, grid e gap padrão por breakpoint.
- Use wrappers consistentes (ex.: container mx-auto px-4).
## 4) Dark mode sem gambiarra
- Modo baseado em classe (class strategy) e tokens de cor compatíveis com ambos os temas.
- Teste contraste e legibilidade; evite cinzas muito próximos.
## 5) Acessibilidade embutida
- Foco visível (focus:ring), estados aria-*, hierarquia semântica.
- Defina componentes já acessíveis por padrão; não terceirize ao dev "lembrar depois".
## 6) Limites e lint
- ESLint + Tailwind lints para banir valores arbitrários fora do contexto de tokens.
- PRs exigem screenshots em breakpoints principais.
## Conclusão
Tailwind funciona melhor com design system leve e disciplina: tokens definidos, componentes com variantes e processos que previnem entropia. O ganho é velocidade com previsibilidade visual.
- Crie componentes com variantes (ex.:
Button, Card, Badge) usando libs como class-variance-authority ou padrões utilitários.- Evite reescrever 10 util classes toda hora; extraia padrões frequentes.
## 3) Layouts previsíveis
- Defina escalas de
max-w, container, grid e gap padrão por breakpoint.- Use wrappers consistentes (ex.:
container mx-auto px-4).## 4) Dark mode sem gambiarra
- Modo baseado em classe (
class strategy) e tokens de cor compatíveis com ambos os temas.- Teste contraste e legibilidade; evite cinzas muito próximos.
## 5) Acessibilidade embutida
- Foco visível (
focus:ring), estados aria-*, hierarquia semântica.- Defina componentes já acessíveis por padrão; não terceirize ao dev "lembrar depois".
## 6) Limites e lint
- ESLint + Tailwind lints para banir valores arbitrários fora do contexto de tokens.
- PRs exigem screenshots em breakpoints principais.
## Conclusão
Tailwind funciona melhor com design system leve e disciplina: tokens definidos, componentes com variantes e processos que previnem entropia. O ganho é velocidade com previsibilidade visual.