A Tailwind CSS v4 migráció az egyik legnagyobb váltás a framework életében. A v4 nem csak frissítés – alapjaiban gondolja újra a konfiguráció megközelítését. A JavaScript-alapú tailwind.config.js helyett a CSS maga válik az egyetlen konfigurációs felületté. Ez komoly következményekkel jár a meglévő projektekre és a fejlesztési workflow-ra egyaránt.
Tailwind CSS v4 migráció: mi változott valójában?
A v4 legnagyobb újítása a CSS-first konfiguráció. A korábbi verziókban a témát egy JavaScript fájlban definiáltad: színek, betűméretek, töréspontok mind ott szerepeltek. A v4-ben ezt a szerepet az @import „tailwindcss” direktíva és az @theme blokk veszi át. Ez a szétválasztás a konfigurációt közelebb hozza a natív CSS gondolkodásmódhoz.
A beépített CSS-változók jelentős változást hoznak. Minden design token automatikusan CSS-változóként érhető el a generált kódban. Ez megkönnyíti a JavaScriptből való értékhozzáférést, és javítja az interoperabilitást más rendszerekkel. A TypeScript 6.0 váltáshoz hasonlóan ez is ökoszisztéma-szintű átállást jelöl.
A build teljesítmény drasztikusan javult. A Tailwind csapat mérései szerint a teljes build akár százszor gyorsabb lehet. A növekményes build harminc-negyvenszeres sebességet is elérhet. Ez a Lightning CSS integrációnak köszönhető, amely felváltja a korábbi PostCSS alapú transzformációs réteget. A Rolldown-Vite cikkünkben írtunk a Rust-alapú builderek terjedéséről – ez a tendencia a Tailwind v4-ben is tükröződik.
A névkonvenciók is módosultak. Néhány segédosztály neve pontosabbá vált. A v3-ban elavult elemek végleg eltűnnek. Ez átgondoltabb átállást igényel, de a framework konzisztensebbé válik.
A CSS-first konfiguráció és az @theme direktíva
A v4-ben az importálás megváltozott. A régi @tailwind base/components/utilities hármas helyett egyetlen sor elegendő: @import „tailwindcss”. Ez automatikusan behúzza az összes alapréteget. A v3-ban szükséges PostCSS plugin konfiguráció is egyszerűbbé vált – a Vite és a modern builderek natívan kezelik az új szintaxist.
Az @theme blokk az egyedi értékek helye. Ha egyedi színt, betűtípust vagy töréspontot szeretnél definiálni, ide kell írni – CSS-változó szintaxissal. A Tailwind ezeket az értékeket felolvassa, és a segédosztályrendszerbe integrálja. Az OKLCH alapú színrendszer lehetővé teszi a szélesebb gamuttal rendelkező kijelzők korrekt kezelését.
Az @utility direktíva lehetővé teszi saját segédosztályok definiálását. Az @variant segítségével egyedi szelektorokat köthetsz állapotokhoz, például hover: vagy dark: módon. Ez a két direktíva lényegében felváltja a JavaScript-alapú plugin API-t az alapvető testreszabáshoz.
A cascade layers használata átláthatóbbá teszi a specificity-kezelést. A Tailwind stílusai könnyebben felülírhatók egyedi CSS-szel. Nem szükséges !important deklarációkkal harcolni az override-okhoz – a rétegezés explicit és kiszámítható.
Hogyan állj át v3-ról v4-re? A lépések sorban.
A Tailwind csapat biztosít egy automatikus upgrade codemódot. Az @tailwindcss/upgrade csomag lefuttatása elvégzi a legtöbb mechanikus átalakítást: az importok frissítését, az elnevezési változásokat és a konfigfájl konvertálását. A codemód nem 100%-os megoldás, de a munka nagy részét elvégzi – különösen nagy projekteken érdemes időt szánni a maradék kézzel javítandó esetekre.
Az átállás előtt commitolj minden változást. Az automatikus migráció kezeli a legtöbb szintaktikai átalakítást, de az edge case-ek manuális beavatkozást igényelnek. Futtasd le a vizuális regressziós tesztedet – a shadow és ring értékek módosulhatnak.
Ha a projekted Vite-ot használ, a @tailwindcss/vite plugin az ajánlott belépési pont. PostCSS-t használóknak az @tailwindcss/postcss csomag áll rendelkezésre. A WordPress fejlesztőknek érdemes tudni, hogy a meglévő theme.json és Tailwind párosítást is át kell gondolni, mivel a CSS-változók köre és elnevezése változhat.
Az átállás nem kötelező azonnal. A v3 még kap biztonsági frissítéseket. Ha a projekt stabil és nincs égető build-teljesítmény probléma, az átállást el lehet halasztani. Az új projekteket azonban már v4-es alapon érdemes kezdeni – a CSS-first megközelítés hosszabb távon fenntarthatóbb konfigurációs modellt ad.
A Tailwind CSS v4 migráció az összképben pozitív irány. A CSS-first konfiguráció egyszerűsíti a testreszabást, csökkenti a JavaScript-függőséget, és közelebb viszi a frameworköt a natív CSS képességekhez. A legjobb stratégia: tesztelj egy mellékes ágon, futtasd le az upgrade codemódot, és ellenőrizd a vizuális különbségeket. A Tailwind v4 dokumentáció és a Biome linting cikkünk jó kiindulópontot adnak a modernebb frontend toolchain kialakításához.
