Tailwind CSS v4: ce s-a schimbat și de ce contează

Tailwind CSS v4 e aici și nu mai e doar un upgrade minor — e o rescriere completă a engine-ului. Dacă ai folosit Tailwind v3, pregătește-te pentru câteva schimbări majore care simplifică setup-ul și accelerează build-urile. Iată ce s-a schimbat, ce trebuie să faci la migrare și de ce merită.

Ce s-a schimbat în Tailwind v4

• Config inline în CSS — în loc de tailwind.config.ts, configurezi direct în CSS cu @theme
• Performanță drastic îmbunătățită — engine-ul nou e construit pe Lightning CSS și e de aproximativ 10x mai rapid la build
• CSS-first — nu mai ai nevoie de PostCSS clasic; e suficient @tailwindcss/postcss sau chiar doar un import direct
• Variante noi — @custom-variant înlocuiește variantele personalizate din config
• Funcții CSS moderne — suport nativ pentru oklch(), color-mix() și nesting CSS

Cum arată config-ul acum

În v4, tema se definește exclusiv în CSS. Un exemplu minim:

@import "tailwindcss";

@theme inline {
  --color-brand: oklch(0.75 0.15 70);
  --font-display: "Syne", sans-serif;
}

@custom-variant dark (&:is(.dark *));

Practic, tot ce defineai în tailwind.config.ts (culori, fonturi, breakpoints, animații) se mută în CSS, ceea ce face tema mai ușor de citit și de întreținut, direct lângă stilurile componentei.

Probleme de migrare de la v3

• @apply încă funcționează, dar e recomandat să îl eviți (poate cauza probleme cu variantele complexe)
• Tema se definește exclusiv în CSS, nu în JS — mută tot ce e în tailwind.config în @theme
• Plugin-urile custom trebuie rescrise pentru noul engine
• Variantele hover:, focus: și altele au comportament mai strict la compilare
• Numele unor utilitare s-au schimbat; rulează updater-ul oficial pentru migrare automată

De ce merită să migrezi

• Build-uri semnificativ mai rapide — pe proiecte mari, diferența se simte la fiecare salvare
• Bundle mai mic — engine-ul nou elimină mai agresiv CSS-ul nefolosit
• Teme mai naturale — culori în OKLCH, variabile CSS clare, design tokens citibile
• Viitor-proof — v4 e baza pentru toate versiunile următoare

Întrebări frecvente

Pot rula Tailwind v3 și v4 în același proiect?

Nu e recomandat: cele două engine-uri au comportamente diferite la compilare și pot genera CSS conflictual. Migrarea se face o singură dată, cu planificare.

Migrarea e riscantă pentru un proiect mare?

Dacă ai multe configurații custom, migrarea necesită testare, dar updater-ul oficial + o rundă de screenshot-uri comparative o fac controlabilă. Pentru site-uri construite cu v4 din start, riscul e zero.

Concluzie

Tailwind v4 e un salt real în simplitate și performanță. Dacă începi un proiect nou, v4 e alegerea evidentă; dacă ai un proiect vechi, programează migrarea cu testare. Eu folosesc Tailwind v4 în toate proiectele noi — inclusiv pe site-urile pe care le construiesc pentru clienți.