Tailwind vs CSS Modules: abordagens de estilização comparadas
Tailwind é CSS utility-first aplicado via nomes de classe; CSS Modules são folhas de estilo com escopo local, colocadas junto aos componentes.
O Tailwind compõe designs a partir de classes utilitárias de baixo nível no markup, com uma etapa de purge que mantém o bundle pequeno. Os CSS Modules permitem escrever CSS normal que é automaticamente escopado para um componente, evitando colisões globais. O Tailwind favorece velocidade e consistência; os CSS Modules favorecem CSS familiar e explícito.
| Tailwind | CSS Modules | |
|---|---|---|
| Autoria | Classes utilitárias no markup | Arquivos .module.css escopados |
| Escopo | Utilitários globais | Local por padrão |
| Bundle | Utilitários purgados | CSS por componente |
| Consistência de design | Forte (tokens) | Fica a seu critério |
| Melhor para | UI rápida e consistente | CSS familiar e explícito |
No CI
Ambos compilam bem no CI. O Tailwind adiciona uma etapa de purge/JIT que remove classes não usadas; os CSS Modules adicionam hashing de classes escopadas durante o bundle. Nenhum muda materialmente a complexidade do build. Escolha pela preferência do time - muitos usam Tailwind por velocidade e consistência, e CSS Modules por estilos explícitos e agnósticos a framework.
Acelere
Faça cache das dependências e do build cache entre execuções em qualquer um dos casos. Ambos compilam em CI runners; runners gerenciados mais rápidos encurtam a etapa de build de assets.
O veredito
Quer autoria rápida, design tokens e consistência: Tailwind. Prefere escrever CSS explícito e escopado sem aprender utilitários: CSS Modules. Ambos são comprovados em produção; a escolha é em grande parte preferência do time.