promovaweb Tailwind CSS
Fluxo
- Confirmar versão, integração, fonte de tokens e componentes existentes.
- Traduzir layout e estados em constraints responsivas.
- Reutilizar tokens semânticos antes de valores arbitrários.
- Implementar mobile-first, estados interativos e preferências do usuário.
- Extrair componente quando houver unidade semântica, não só repetição visual.
- Revisar conflitos, classes dinâmicas e CSS gerado.
- Validar navegadores, temas, zoom e tamanhos extremos.
Padrões
- Manter cor, spacing, radius e tipografia em tokens com nomes de intenção.
- Usar variantes para estado; não esconder comportamento em concatenação opaca.
- Evitar
@applycomo substituto geral de componentes. - Garantir que classes construídas dinamicamente sejam detectáveis pelo build.
- Tratar dark mode, reduced motion, contrast e forced colors conscientemente.
- Preferir layout fluido e container queries quando o componente depende do contêiner.
- Não multiplicar valores arbitrários sem justificar novo token.
Validação
- Build de produção e inspeção de estilos ausentes.
- Viewports, containers, zoom 200/400%, tema e conteúdo longo.
- Hover, focus-visible, disabled, loading, error e selected.
- Contraste e preferência por movimento reduzido.
Leia references/standards.md para tokens, responsividade, variantes, acessibilidade e migração.