O Tailwind CSS v4 não é apenas uma atualização incremental; é uma reescrita completa da engine interna, focada em velocidade.
1. Oxide: A Nova Engine em Rust
A maior mudança está "embaixo do capô". A nova engine, chamada Oxide, foi escrita em Rust. O resultado? Compilações até 10x mais rápidas.
Se você trabalha em projetos grandes (monorepos), sabe que o tempo de build do Tailwind v3 podia ser um gargalo. Com a v4, a atualização do HMR (Hot Module Replacement) é instantânea.
2. Zero Configuration
Diga adeus ao tailwind.config.js gigante.
Na v4, o Tailwind detecta automaticamente seus arquivos de conteúdo. Não é mais necessário configurar o array content: [] manualmente na maioria dos casos.
Além disso, as variáveis CSS agora são cidadãos de primeira classe.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-primary: 220 50% 50%; /* Definido nativamente */
}
}
Você pode usar essas variáveis diretamente nas classes utilitárias sem configuração extra no tema.
3. Dynamic Values (Valores Arbitrários Otimizados)
O uso de colchetes w-[500px] sempre foi poderoso, mas agora a engine trata esses valores com muito mais inteligência, reduzindo a duplicação no CSS final gerado.
4. Container Queries Nativas
O suporte para @container agora é tratado diretamente pela engine, simplificando a sintaxe. Isso permite criar componentes que se adaptam baseado no tamanho do pai, não da viewport.
<div class="@container">
<div class="@lg:grid-cols-3 grid grid-cols-1">
<!-- Grid muda quando o container pai for maior que lg (32rem) -->
</div>
</div>
Como Migrar?
A migração foi pensada para ser suave. A equipe do Tailwind lançou uma ferramenta de CLI que automatiza 90% das mudanças de sintaxe.
npx tailwindcss-upgrade