Quando Usar Tailwind CSS: Utility-First
Quando Tailwind é produtivo e quando CSS tradicional ou CSS-in-JS são melhores.
Por que isso é importante
Quando Usar Tailwind CSS: Utility-First. Quando Tailwind é produtivo e quando CSS tradicional ou CSS-in-JS são melhores.
Quando SIM usar Tailwind
Você quer velocidade máxima de prototipação
Tailwind no HTML é mais rápido que escrever CSS. Não precisa nomear classes, não troca arquivos. Ideal pra MVPs e iteração rápida.
Time colabora sem conflicts de CSS
Utility classes evitam conflitos de nomes. Sem especificidade hell. Múltiplos devs trabalham sem pisar no CSS uns dos outros.
Design system é baseado em tokens
Tailwind config define spacing, cores, typography. Enforce consistency automático. Designer define, devs usam tokens.
Bundle size e performance importam
PurgeCSS remove classes não usadas. CSS final é mínimo. Não cresce infinito como CSS tradicional que acumula lixo.
Você usa componentes (React, Vue, Svelte)
Tailwind no JSX é natural. Component encapsula markup + styles. Copiar componente leva styles junto. Zero CSS órfão.
Quando NÃO usar Tailwind
Time odeia classes no HTML
Se devs preferem CSS separado, forçar Tailwind causa atrito. DX ruim mata produtividade. Respeite preferência do time.
Projeto tem CSS legacy complexo
Migrar pra Tailwind dá trabalho. Se você tem anos de CSS custom funcionando, refactor pode não valer. Mantenha o que funciona.
Design é altamente customizado e artístico
Sites com animações CSS complexas, layouts experimentais. Tailwind é pra design system, não arte. CSS puro dá mais controle.
SEO de HTML semântico é crítico
HTML com 20 classes pode afetar legibilidade do source. Pra sites onde HTML limpo importa, CSS separado é mais elegante.
Alternativas por Necessidade
CSS Modules
Scoped CSS automático. Escreve CSS normal, zero conflitos. Ideal se você quer CSS separado sem global namespace.
Styled Components / Emotion
CSS-in-JS com template literals. Styles perto do componente, TypeScript autocomplete. Trade-off é runtime overhead.
UnoCSS
Tailwind mais rápido. Instant build, mesmo syntax. Se você quer Tailwind mas build é lento, tenta Uno.
Framework de Decisão
Checklist pra adotar Tailwind
4+ sim: Tailwind vai acelerar. 2-3: teste em projeto pequeno. 0-1: fique no CSS tradicional.
Começando com Tailwind
Use CDN pra testar antes de commitar. Instala Prettier plugin pra organizar classes. Cria components pra reuso. Só depois configura design tokens custom.