Tailwind CSS v4: čo sa naozaj zmenilo a komu sa oplatí prechod

Tailwind CSS je jeden z najpoužívanejších nástrojov na štýlovanie webových rozhraní. Verzia 4 priniesla najväčšiu zmenu v jeho histórii: nové jadro, odlišný spôsob konfigurácie a sľub výrazne rýchlejších buildov. Aj preto sa o nej často píše v superlatívoch. Čo z toho je overené, kde sú limity a pre koho je prechod zaujímavý?

Nie je to novinka tohto týždňa

Verzia 4.0 vyšla v januári 2025, takže ide o zmenu, ktorú vývojári poznajú už skoro dva roky. Pre čitateľov, ktorí ju ešte neriešili, je užitočné vedieť, čo presne priniesla a či sa ich týka.

Nový engine a rýchlosť

Jadro frameworku vývojári prepísali a nazvali Oxide. Podľa opisu je napísané v jazyku Rust a pri produkčnom builde prechádza CSS cez nástroj Lightning CSS, ktorý rieši predpony, minifikáciu a transformáciu moderných vlastností.

Čo tvrdia merania

Vývojári uvádzajú, že plné buildy sú až 5-krát rýchlejšie a inkrementálne buildy viac než 100-krát rýchlejšie. Konkrétne merania na ich vlastnom projekte ukázali tieto mediány:

• Plný build: z 378 ms na 100 ms (približne 3,8-násobné zrýchlenie).
• Inkrementálny build s novým CSS: zo 44 ms na 5 ms (približne 8,8-násobné).
• Inkrementálny build bez nového CSS: z 35 ms na 192 mikrosekúnd (viac než 180-násobné).

Ako tieto čísla čítať

Ide o merania samotných vývojárov frameworku na jednom projekte, nie o nezávislý test. Tvrdenie o „10-násobnom zrýchlení“ nám zdroje nepotvrdili. Najväčšie zrýchlenie sa týka inkrementálnych buildov, kde sa nič nové nekompiluje. Rozdiel na vašom projekte závisí od jeho veľkosti a nastavenia. Dôležité je aj to, že kompilácia CSS býva len časťou celého buildu aplikácie, preto zrýchlenie celého procesu nemusí byť také výrazné. To je náš záver, nie tvrdenie z merania.

Konfigurácia priamo v CSS

Najviditeľnejšia zmena pre vývojára je, že framework sa už nekonfiguruje primárne v súbore tailwind.config.js, ale priamo v CSS pomocou direktív ako @theme. Základom je jediný riadok @import "tailwindcss";, namiesto troch pôvodných direktív. Návrhové hodnoty, napríklad farby či písma, sa sprístupnia ako natívne premenné CSS.

Automatické rozpoznávanie súborov

Verzia 4 automaticky rozpoznáva súbory so šablónami, takže zoznam ciest v konfigurácii už zvyčajne nie je potrebný.

Čo sa nezmenilo

Tvrdenie, že konfiguračný súbor v JavaScripte je „minulosťou“, je prehnané. Podľa dostupnej dokumentácie ho verzia 4 stále podporuje cez direktívu @config. Rovnako nie je pravda, že sa framework úplne zbavil prostredia Node.js. Migračný nástroj ho vyžaduje vo verzii 20 alebo novšej.

Moderné funkcie CSS

Verzia 4 využíva novšie možnosti CSS, ako sú vrstvy (@layer), registrované vlastnosti (@property) či funkcia color-mix(). Medzi ďalšie novinky patrí rozšírená podpora farebného priestoru P3, vstavané kontajnerové dotazy, utility pre 3D transformácie, rozšírené farebné prechody a nový variant not-*.

Obmedzenie: staršie prehliadače

Dôležité upozornenie, ktoré sa v nadšených článkoch často vynecháva: kvôli moderným funkciám CSS verzia 4 cieli na novšie prehliadače. Podľa dostupných prehľadov ide o Safari 16.4 a novšie, Chrome 111 a novšie a Firefox 128 a novšie. Ak potrebujete podporovať staršie, zostáva možnosť ostať pri verzii 3.4.

Migrácia z verzie 3

Pre existujúce projekty je k dispozícii automatizovaný migračný nástroj, ktorý dokáže aktualizovať závislosti, preniesť konfiguračný súbor do CSS a upraviť šablóny. Vývojári odporúčajú spustiť ho v novej vetve, dôkladne si prezrieť zmeny a projekt otestovať v prehliadači. Nástroj nie je zázračné riešenie: po migrácii treba skontrolovať vzhľad a vlastné konfigurácie.

Čo nemáme potvrdené

• Úspora pamäte a procesora, a tým aj minút v cloudových službách. Zdroje, ktoré sme našli, hovoria o rýchlosti, nie o spotrebe zdrojov. Úsporu pri nasadzovaní preto nemôžeme tvrdiť.
• „Koniec konfigurovania nástrojov na zostavovanie.“ To je marketingová formulácia bez opory. Spôsob začlenenia (napríklad plugin pre Vite alebo PostCSS) sa mení, no nastavovanie sa celkom nekončí.

Komu sa prechod oplatí

Pre nový projekt, ktorý cieli na moderné prehliadače, je verzia 4 rozumnou voľbou. Pre veľké existujúce aplikácie s podporou starších prehliadačov alebo bohatou vlastnou konfiguráciou je lepšie plánovať migráciu opatrne a otestovať ju na samostatnej vetve.

Záver

Tailwind CSS v4 priniesol skutočne významné zmeny: nový engine, konfiguráciu v CSS a využitie moderných vlastností CSS. Rýchlosť potvrdili merania samotných autorov, no na rozdiel od titulkov nie je všetko revolúcia: konfigurácia v JavaScripte stále funguje, podpora starších prehliadačov je obmedzená a prínos pre váš projekt je potrebné overiť meraním.