Tailwind CSS 4.0 - 10x Mais Rápido com Engine Rust

Visão Geral do Tailwind CSS 4.0

O Tailwind CSS 4.0 adota o novo engine “Oxide” escrito em Rust, melhorando drasticamente a velocidade de build. Além disso, o método de configuração mudou para CSS-first, tornando-se mais intuitivo.

Engine Oxide

Desempenho Impressionante

Comparação de velocidade de build:
- Tailwind 3.x: 500ms
- Tailwind 4.0: 50ms (10x mais rápido)

Build incremental no modo watch:
- Tailwind 3.x: 100ms
- Tailwind 4.0: 5ms (20x mais rápido)

Configuração CSS-First

Em vez do tradicional tailwind.config.js, as configurações são feitas diretamente no CSS.

/* app.css */
@import "tailwindcss";

@theme {
  /* Paleta de cores */
  --color-primary: #3b82f6;
  --color-secondary: #10b981;

  /* Fontes */
  --font-sans: "Inter", sans-serif;

  /* Espaçamento */
  --spacing-18: 4.5rem;

  /* Breakpoints */
  --breakpoint-3xl: 1920px;
}

Migração da Configuração Tradicional

// tailwind.config.js (tradicional)
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6'
      }
    }
  }
};

// app.css (Tailwind 4.0)
@theme {
  --color-primary: #3b82f6;
}

Novas Classes Utilitárias

Container Queries

<div class="@container">
  <div class="@sm:flex @lg:grid @lg:grid-cols-3">
    <!-- Layout muda conforme o tamanho do container -->
  </div>
</div>

Transformações 3D

<div class="perspective-1000">
  <div class="rotate-x-45 rotate-y-30 translate-z-20">
    Elemento com transformação 3D
  </div>
</div>

Melhorias em Gradientes

<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500
            via-30%">
  Controle fino da posição do gradiente
</div>

Uso de CSS Custom Properties

@theme {
  --color-brand: oklch(65% 0.2 250);
  --color-brand-light: oklch(from var(--color-brand) calc(l + 20%) c h);
  --color-brand-dark: oklch(from var(--color-brand) calc(l - 20%) c h);
}

<button class="bg-brand hover:bg-brand-dark text-white">
  Botão com cor da marca
</button>

Instalação e Configuração

npm install tailwindcss@next @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss()]
});

/* app.css */
@import "tailwindcss";

Pontos de Migração

Resumo

O Tailwind CSS 4.0 melhora a experiência de desenvolvimento com aceleração significativa pelo engine Rust e configuração CSS-first. Desenvolva sem se preocupar com tempo de build mesmo em projetos de grande escala.