Tailwind CSS vs CSS tradicional: quando usar cada um

O que muda com Tailwind CSS?

Tailwind CSS propõe uma abordagem utility-first, onde você compõe estilos diretamente no HTML usando classes utilitárias. Em vez de criar classes semânticas como .card-header, você combina classes como flex, p-4 e text-lg. Isso muda completamente o fluxo de desenvolvimento.

Vantagens do Tailwind CSS

• Velocidade de desenvolvimento: sem alternar entre arquivos HTML e CSS constantemente
• Consistência visual: o design system é embutido na configuração (espaçamentos, cores, tipografia)
• CSS final menor: o PurgeCSS remove classes não utilizadas, gerando arquivos minúsculos
• Responsividade simples: prefixos como md: e lg: tornam layouts responsivos muito intuitivos
• Facilidade de manutenção: ao ler o HTML, você sabe exatamente como o elemento aparece

Quando o CSS tradicional faz mais sentido

Existem cenários onde CSS tradicional com SASS ou PostCSS é mais adequado:

• Projetos com equipe grande onde designers entregam specs detalhadas
• Sistemas de design compartilhados entre múltiplas aplicações
• Quando o HTML gerado é externo e você não tem controle sobre as classes
• Projetos com animações complexas e CSS customizado extenso

Abordagem híbrida

Na prática, muitos projetos combinam as duas abordagens. Use Tailwind para layout e espaçamento, e CSS customizado para animações e componentes muito específicos. O Tailwind inclusive suporta a diretiva @apply para criar classes customizadas quando necessário.

Conclusão

Não existe resposta universal. Avalie o tamanho do time, a complexidade do design e a manutenção a longo prazo antes de decidir. Na Siiim, usamos Tailwind CSS na maioria dos projetos pela produtividade que oferece.