Desenvolvimento web

Tailwind CSS ainda é necessário? O que eu escolheria num site novo

Tailwind é útil, mas não resolve sozinho a consistência visual que falta nos sites criados com IA. Entenda quando eu usaria CSS moderno, quando manteria Tailwind e quais alternativas ainda fazem sentido.

Assistir ao vídeo original no YouTube
Thumbnail do vídeo: Você não precisa de Tailwind CSS! Culpa da IA?

Você navega por um site e os botões mudam de tamanho, os cards usam espaços diferentes e cada página parece ter vindo de um projeto separado. Eu vejo isso bastante em sites feitos com IA. Tailwind CSS aparece em muitos deles, mas o problema principal não é o framework: é deixar cada nova tela tomar decisões visuais sem consultar o restante do site.

Tailwind continua útil; a IA mudou o trabalho que ele economizava

Quando eu escrevia o código manualmente, Tailwind era conveniente. Eu ajustava tamanho, espaço, cor e alinhamento no próprio elemento, sem alternar entre o HTML e o arquivo de CSS. Os valores do sistema também davam limites para as escolhas e ajudavam a manter a aparência coerente. Para quem programa o dia inteiro, faz sentido cortar esse trabalho repetitivo.

Com a IA, ficou fácil pedir uma tela, depois outra, e receber cada uma funcionando. A diferença aparece quando você percorre o site inteiro: um cabeçalho cresceu, os cards não têm o mesmo espaço e os botões ganharam alturas diferentes. Nada precisa estar tecnicamente quebrado para o site perder a identidade. O agente resolve a página que está na frente dele e pode não perceber que já existe um componente parecido em outro lugar.

Isso não acontece só com Tailwind. A IA também pode inventar classes no CSS puro ou desrespeitar os componentes de qualquer framework. Tailwind permite reaproveitar utilitários e declarar tokens de tema; o desvio começa quando o agente cria valores para cada pedido em vez de seguir essas regras. E uma diferença importante: o Tailwind atual gera CSS a partir das classes encontradas nos arquivos, então não dá para concluir que a folha final sempre ficará maior. O HTML, porém, pode ficar carregado com sequências longas de classes.

O que mantém o visual coerente é um padrão compartilhado

Trocar Tailwind por CSS puro não corrige, sozinho, um agente que ignora o que já existe. Para mim, ajuda concentrar as decisões de cor, espaço e tipografia em variáveis e criar classes ou componentes que as páginas reaproveitam. Aí uma mudança no botão ou no cabeçalho acontece no lugar responsável por aquele padrão, em vez de depender de encontrar cada variação que a IA espalhou pelo projeto.

Quando começo uma página com um agente, peço que ele procure primeiro os componentes e valores existentes. Se não houver um card ou uma regra que sirva, definimos um padrão e reutilizamos nas próximas telas. No fim, eu olho as páginas juntas, não apenas a tela que acabou de mudar. Uma ferramenta como o Impeccable pode ajudar a encontrar problemas de design e lembrar o agente do sistema visual; ainda assim, ela não substitui a revisão do conjunto.

Eu gosto de abrir o HTML e reconhecer um cabeçalho, um card, um menu e um botão sem ler uma lista extensa de classes para descobrir o papel de cada elemento. Separar estrutura e estilo facilita esse tipo de leitura para mim. Também não afirmo que CSS puro sempre consuma menos tokens ou que Tailwind sempre consuma mais: depende da implementação. O ganho que procuro é ter uma regra visual que o projeto inteiro consiga compartilhar.

CSS moderno e outras opções já cobrem bastante coisa

Antes da IA, escrever CSS exigia criar nomes, organizar arquivos e repetir propriedades. Agora posso deixar o agente escrever essas regras, então digitar menos deixou de ser meu principal critério. Flexbox, Grid, variáveis, `clamp()`, cascade layers, container queries, subgrid, nesting e escopo com `@scope` dão ao CSS moderno recursos para montar e organizar interfaces; eu só verificaria o suporte dos navegadores que o projeto precisa atender.

Se você usa Vue, pode isolar estilos em componentes de arquivo único ou escolher uma biblioteca como Vuetify quando quer começar com componentes prontos. Para páginas baseadas em HTML semântico, o Pico CSS era uma opção pequena que aplicava um visual inicial com poucas classes. Só que o projeto anunciou que a versão 2.1.1 foi a última e arquivou os repositórios. Ele continua disponível, mas eu avaliaria essa falta de manutenção antes de colocá-lo num projeto novo.

O Open Props é diferente: oferece variáveis CSS para valores de cor, espaço, sombra e outros tokens, sem obrigar você a escrever o site inteiro com utilities. Se gosta da abordagem utilitária, o UnoCSS é outra opção para estudar. Nenhuma dessas ferramentas impede uma IA de criar variações por conta própria; o que ajuda é escolher uma regra e pedir que ela seja seguida.

Mantenha Tailwind onde ele já está funcionando

Se o projeto já é grande e está em Tailwind, eu não começaria uma migração só para trocar de tecnologia. Se a equipe conhece o framework, o design system está definido e os componentes são reutilizados, continue com ele. O mesmo vale se você gosta de trabalhar com classes utilitárias. Há espaço para manter Tailwind e, ao mesmo tempo, pedir à IA para respeitar os tokens e componentes do projeto.

Em um site novo, blog, ferramenta pequena ou landing page, eu avaliaria primeiro se o CSS moderno resolve o que preciso antes de acrescentar outro framework. Eu sou pessoalmente contra instalar ferramentas por reflexo, não contra Tailwind. Para mim, a pergunta útil é simples: o que essa dependência vai resolver que um padrão de CSS e componentes compartilhados não resolveriam? Se a resposta for clara, use. Se não for, você não precisa adotar Tailwind só porque a IA escolhe isso por padrão.

Essa mesma ideia de escolher a tecnologia pelo que o projeto precisa aparece em como escolher uma stack sem começar pelo Next.js.