Il 22 gennaio 2025, Tailwind Labs ha rilasciato la versione 4 stabile. Dopo mesi di alpha e beta, il framework CSS più diffuso del 2024 si presenta con un nuovo motore in Rust e una filosofia rinnovata: meno JavaScript, più CSS.
Il motore Oxide
Il nuovo engine, chiamato Oxide, è scritto in Rust e Lightning CSS. I numeri dichiarati da Tailwind Labs:
- Build full 3,5x più veloce.
- Build incrementali fino a 100x più veloci.
- Tempo di startup ridotto in modo netto.
Sui nostri progetti reali abbiamo misurato un dev server che si aggiorna in ~50ms contro i ~280ms della v3. Sui CI build, la differenza è meno marcata ma comunque tangibile.
Configurazione CSS-first
Addio tailwind.config.js: in v4 la configurazione vive nel CSS, dichiarata con @theme.
@import "tailwindcss";
@theme {
--color-brand: oklch(0.65 0.18 250);
--font-display: "Inter Tight", sans-serif;
--breakpoint-3xl: 1920px;
}Il vantaggio non è solo estetico: i token di tema diventano variabili CSS reali, accessibili a runtime. Per i designer che lavorano con design tokens condivisi tra Figma e codice, è una porta che si apre.
Container queries nativi
Le container queries, prima disponibili solo via plugin @tailwindcss/container-queries, sono ora core. La sintassi:
<div class="@container">
<div class="@md:grid-cols-2"> ... </div>
</div>Per chi costruisce design system con componenti che vivono in contenitori di larghezza variabile, è un cambio enorme. Le media queries restano per il layout di pagina; le container queries sono per il design dei componenti.
Supporto nativo a CSS moderne
color-mix(): usato internamente per varianti di opacità senza trick.oklch(): gli scale di colore default sono espressi in oklch, con risultati più uniformi sulla luminosità percepita.- Cascade layers (@layer): meno conflitti con CSS custom.
La migrazione
Da v3 a v4 esiste un upgrade tool ufficiale che fa la maggior parte del lavoro:
npx @tailwindcss/upgradeSui nostri progetti il tool ha risolto il 95% delle modifiche. Il 5% rimanente è solitamente:
- Plugin custom non aggiornati.
- Override profondi di
tailwind.config.js(es. estensioni del color system). - Ricerca/sostituzione di classi rinominate (poche).
Il browser support si è alzato: serve Safari 16.4+, Chrome 111+, Firefox 128+. Per progetti che devono supportare browser più vecchi, restate sulla v3 finché possibile.
Verdetto dopo un mese in produzione
Su 4 progetti migrati abbiamo zero regressioni significative e un dev server più reattivo. La configurazione in CSS è la novità che ci ha sorpreso di più: dopo qualche giorno, tornare al config.js sembra macchinoso. Per progetti nuovi, v4 è il default. Per progetti vecchi, la migrazione è opzionale ma consigliata entro l'anno.