Tailwind CSS v4: o que mudou na API de configuração

Adeus tailwind.config.js

Tailwind v4 migra toda a configuração para CSS puro, dentro do arquivo de entrada via diretiva @theme. Não há mais um arquivo JavaScript de configuração — o processamento acontece dentro do próprio pipeline CSS.

@theme: tokens CSS nativos

@theme {
  --color-primary: #157a4e;
  --font-sans: 'Inter', sans-serif;
}

Cada variável definida em @theme vira automaticamente uma classe utilitária. --color-primary gera bg-primary, text-primary, border-primary e todas as variantes responsivas e de estado.

O fim do @apply

O @apply foi descontinuado no Tailwind v4. A lógica é clara: componentes devem ser compostos com classes utilitárias diretamente no HTML, não em CSS separado. Se você precisa de abstração, use um componente de template.

A resistência ao @apply é intencional. Classes no HTML são pesquisáveis, rastreáveis e honestas sobre o que o componente faz.

Performance de build

O Tailwind v4 usa um motor completamente reescrito em Rust (via oxide). O tempo de build de projetos grandes caiu de segundos para dezenas de milissegundos.