Se você já entregou alguns projetos com Tailwind, provavelmente lembra do ritual: instalar PostCSS, configurar o tailwind.config.js, definir paths de content, ajustar plugins e torcer para o build continuar rápido conforme o código cresce. O Tailwind CSS 4 muda esse fluxo de forma concreta. Não é um update cosmético — é uma repensada de como um framework utility-first deve se integrar às ferramentas modernas e ao CSS nativo.
Lançado como versão major após um beta longo, o Tailwind 4 traz configuração para dentro do CSS, adota variáveis CSS como tokens de design e inclui um motor de alta performance. Para times que trabalham com Nuxt, Vue e Vite, o ganho prático é setup mais simples, feedback mais rápido no desenvolvimento e menos camadas entre o design system e o navegador.
Configuração CSS-First
A maior mudança de mentalidade no Tailwind 4 é que a folha de estilo vira a fonte da verdade. Em vez de manter um arquivo JavaScript de config, você importa o Tailwind diretamente e customiza com diretivas CSS:
@import "tailwindcss";
@theme {
--font-display: "Inter", sans-serif;
--color-brand-500: oklch(0.62 0.19 255);
--breakpoint-3xl: 120rem;
}O bloco @theme define tokens de design que o Tailwind transforma em utilities. Cores, fontes, escalas de espaçamento, breakpoints, sombras e muito mais ficam expostos como custom properties. Isso significa que você pode usar var(--color-brand-500) em CSS arbitrário, compartilhar tokens com componentes fora do Tailwind e inspecionar valores direto no DevTools, sem ficar pulando entre arquivos.
Para quem prefere configs em TypeScript, pode parecer estranho no começo. Na prática, porém, colocar tokens junto dos estilos reduz divergência. O tema fica onde é consumido, e overrides respeitam a cascata normal das camadas CSS.
Um Motor de Build Mais Rápido
O Tailwind 4 substitui boa parte do pipeline antigo pelo Oxide, um compilador em Rust integrado ao Lightning CSS. Escanear, parsear e gerar utilities ficou bem mais rápido — muitas vezes de forma bem perceptível em monorepos grandes ou design systems com milhares de combinações de classes.
Essa velocidade aparece no dia a dia. O Hot Module Replacement fica mais responsivo em apps com Vite. Builds de CI encurtam. E como a detecção de content ficou mais inteligente, você passa menos tempo mantendo glob patterns na config.
Se você usa o plugin oficial @tailwindcss/vite em um projeto Nuxt ou Vue, o Tailwind vira uma parte nativa e enxuta do dev server — em vez de uma etapa PostCSS separada que quebra em silêncio quando algo dá errado.
Instalação Simples e Menos Peças Móveis
Começar com Tailwind 4 parece quase simplista demais:
@import "tailwindcss";Esse único import substitui o trio antigo @tailwind base/components/utilities. PostCSS é opcional, dependendo da stack — quem usa Vite pode dispensar completamente. A detecção automática de content encontra templates na maioria dos frameworks sem configuração manual.
Quando você precisa de controle explícito — por exemplo, escanear um pacote de UI compartilhado fora da raiz do app — a diretiva @source declara paths adicionais no CSS:
@source "../packages/ui/src";Isso ajuda muito em monorepos onde componentes vivem em pacotes consumidos por vários apps. Você declara as fontes uma vez, perto do tema, em vez de duplicar globs entre projetos.
Tokens de Design como Variáveis CSS Nativas
Cada valor de tema no Tailwind 4 vira uma variável CSS com nomenclatura previsível: --color-*, --spacing-*, --font-*, e assim por diante. Utilities como bg-brand-500 compilam para regras que referenciam essas variáveis.
Por que isso importa?
Temas em runtime ficam mais diretos. Alterne dark mode ou variantes de marca trocando valores de variáveis em :root ou em um data attribute — sem rebuild para mudanças de tema guiadas pela preferência do usuário.
Interoperabilidade melhora. Um componente Vue com estilos scoped usa os mesmos tokens das utilities Tailwind, sem importar config em JavaScript.
Handoff de design fica mais limpo. Tokens no Figma ou na documentação do design system mapeiam direto para variáveis que o time de dev já usa no código.
O Tailwind 4 também adota espaços de cor modernos como oklch, que geram paletas mais uniformes na percepção — especialmente importante para contraste acessível em temas claro e escuro.
Recursos Modernos de CSS, Integrados
O Tailwind 4 assume browsers modernos e usa capacidades da plataforma em vez de polyfillar tudo via plugins JavaScript.
Container queries são de primeira classe. Marque um pai com @container (via utility @container) e faça layouts responsivos no componente com classes como @md:flex-row — o layout reage ao tamanho da caixa do componente, não só ao viewport. Isso muda o jogo para componentes Vue reutilizáveis inseridos em layouts imprevisíveis.
Transforms 3D, gradientes aprimorados e suporte a @starting-style para animações de entrada reduzem a necessidade de arquivos CSS customizados ou libs de animação em padrões comuns de UI. O Tailwind continua utility-first, mas cobre mais do que antes você resolvia com CSS puro.
E os Plugins? E a Migração?
Nem tudo do ecossistema v3 mapeia um a um. Plugins de config JavaScript foram substituídos ou reescritos — várias funcionalidades que antes eram plugin (forms, tipografia básica, container queries) agora são core. Plugins de terceiros podem demorar para compatibilizar com v4, então audite dependências antes de atualizar apps em produção.
A migração do v3 conta com ferramentas oficiais, mas espere:
Mover extensões de tema do tailwind.config.js para @theme
Substituir diretivas @tailwind por @import "tailwindcss"
Atualizar a integração de build para @tailwindcss/vite ou @tailwindcss/postcss
Revisar plugins customizados e plugins PostCSS quanto à compatibilidade
Em projetos novos com Nuxt 4 ou Vue 3, começar já no Tailwind 4 evita migração e alinha a stack com a direção do ecossistema.
Por Que o Tailwind 4 Vale a Sua Atenção
CSS utility-first não agrada a todo mundo, e o Tailwind 4 não tenta converter céticos. Ele torna a abordagem mais sustentável para times que já apostam nela.
A combinação de configuração nativa em CSS, tokens baseados em variáveis e um compilador mais rápido ataca dores reais: config espalhada, builds lentos, temas engessados e atrito entre utilities Tailwind e estilos scoped de componentes. Se você constrói design systems, dashboards admin ou sites de marketing em Vue ou Nuxt, essas melhorias aparecem a cada sprint — não só no primeiro dia.
O Tailwind 4 não é mágica. Ainda é preciso disciplina com nomes de classes, extração de componentes e acessibilidade. Mas o framework atrapalha menos. A configuração parece CSS. Os tokens são inspecionáveis. O build continua rápido conforme o projeto cresce. Para devs full-stack modernos, é um upgrade que compensa — e, em projetos novos, é a base que vale padronizar.