TailwindCSS v4: Tudo Que Voce Precisa Saber

Tailwind v4: Uma Reescrita Completa

O TailwindCSS v4 nao e uma atualizacao incremental — e uma reescrita do zero. O motor agora e baseado em CSS nativo, usando @property, @layer e custom properties de forma nativa.

O Que Mudou

Sem tailwind.config.js

A configuracao agora e feita direto no CSS:

@import "tailwindcss";

@theme {
  --color-primary: #f5e642;
  --color-bg-dark: #0a0a0a;
  --font-sans: Inter, sans-serif;
}

Performance 10x Mais Rapida

O novo motor Oxide processa CSS em microsegundos. Builds que levavam segundos agora sao instantaneos. Em projetos grandes, a diferenca e brutal.

CSS Nativo

Tailwind v4 gera CSS usando features nativas do navegador. Isso significa que o output e mais limpo e o browser processa mais rapido.

Container Queries Nativo

<div class="@container">
  <div class="@sm:flex @lg:grid @lg:grid-cols-3">
    ...
  </div>
</div>

Cores com Opacidade Simplificada

<!-- Antes -->
<div class="bg-blue-500/50">

<!-- Agora tambem funciona com custom colors -->
<div class="bg-primary/20">

Como Migrar do v3

1. Instale o v4: npm install tailwindcss@latest


2. Execute o codemod: npx @tailwindcss/upgrade


3. Mova suas customizacoes do tailwind.config.js para @theme no CSS


4. Teste tudo — a maioria das classes continua identica

Minha Experiencia

Migramos o site da Cafe Inovacao do v3 para o v4. O processo levou 2 horas. O resultado: build 5x mais rapido, CSS 30% menor e zero mudanca visual.

Vale Migrar Agora?

Se voce esta comecando projeto novo: obrigatorio usar v4. Se ja tem projeto em v3: migre quando puder, sem pressa. O v3 continua funcionando perfeitamente.