Lightning CSS (Rust) zamiast PostCSS eliminuje 95% overhead'u parsowania — build CSS spada do 340ms niezależnie od rozmiaru projektu. Natywne CSS custom properties w `@theme inline` zamiast Sass variables, container queries bez polyfillów, 7 presetów tematycznych przełączanych jednym plikiem JSON. Design token z `theme.json` propaguje się do każdego komponentu automatycznie.
CSS-in-JS (styled-components, Emotion) rozwiązał problem globalnego namespace CSS, ale stworzył nowy: każdy styl to runtime overhead. Biblioteka stylów pobierana do bundle'a klienta, CSS generowany w JavaScript podczas renderowania, serialized styles jako strings. Na każdym paint. Dla aplikacji z setkami stylizowanych komponentów to 40–80ms dodatkowego JS execution time przy każdym renderze — i bundle 15–25 kb tylko na silnik stylów.
Tailwind CSS utility-first to inny model: klasy generowane w build time, zero runtime, zero JavaScript. JIT compiler skanuje codebase podczas buildu, generuje tylko te klasy które faktycznie istnieją w kodzie. Wyjściowy CSS dla całej strony MazCode: 12.4 kb minified + gzip. Porównaj z typowym projektem CSS-in-JS: 45–80 kb samego CSS i 20 kb runtime.
Tailwind CSS 4 wymienia silnik parsowania CSS. Zamiast PostCSS (JavaScript) — Lightning CSS napisany w Rust. Rust ma natywny paraleizm i brak GC overhead'u, co przekłada się na benchmarki: PostCSS przetwarza duże projekty w 2–8 sekund, Lightning CSS — 50–340ms. W MazCode pełny build CSS: 340ms. Przy każdym HMR: poniżej 20ms. To różnica odczuwalna w codziennej pracy — developer nie czeka na build, IDE preview jest natychmiastowy.
Tailwind CSS 4 porzuca `tailwind.config.js` na rzecz `@theme inline` w CSS. Design tokens definiowane jako CSS custom properties: `--color-primary-500: oklch(0.62 0.17 250)`. Nie jako JavaScript objects — jako natywne zmienne CSS dostępne w całym drzewie DOM bez żadnego preprocessingu. To oznacza że dynamiczne motywy działają bez przebudowy — wystarczy podmienić wartość CSS variable przez JavaScript lub media query. Dark mode, theming per user preference, A/B testy kolorów — wszystko w runtime, zero buildu.
System design tokens w MazCode to pipeline: `theme.json` (źródło prawdy per site) → generowanie CSS custom properties → `@theme inline` w Tailwind → utility classes dla wszystkich komponentów. Zmiana `primaryColor` w `theme.json` dla klienta ortopedycznego aktualizuje każdy button, każdy nagłówek, każdy akcent w całej aplikacji. 7 presetów tematycznych (clinical, bold, editorial, organic, brutalist, notarial, minimal) to 7 kompletnych zestawów tokenów z różną typografią, paletą, spacingiem i cieniami — przełączalne bez dotykania komponentów.
Container queries natywnie w Tailwind 4 rozwiązują problem, który media queries nigdy nie rozwiązały poprawnie: responsywność na poziomie komponentu zamiast viewportu. `@container` sprawia że komponent Card reaguje na szerokość swojego kontenera — i ten sam komponent renderuje się jako pionowa karta w sidebarze i pozioma w głównym layoucie bez żadnych prop-based breakpointów.
Jeden trade-off wart uwagi: utility-first wymaga dyscypliny w większych zespołach. Bez `cn()` utility do mergowania klas i bez dobrze zaprojektowanych shared components, utility classes mogą prowadzić do duplikacji. W MazCode rozwiązujemy to przez komponent-driven design: SectionContainer, SectionHeader, ResponsiveGrid, IconBox mają predefiniowane zestawy klas — developerzy nie piszą `flex items-center justify-between` przy każdym layoucie.
Design tokeny jako natywne CSS custom properties w `@theme inline` — kolory, fonty, spacing, cienie. Podmiana motywu w runtime bez przebudowy aplikacji, dark mode i user preferences przez CSS cascade bez JavaScript.
Natywny `@container` w Tailwind 4 — komponenty reagują na szerokość własnego kontenera, nie viewportu. Ten sam komponent Card renderuje się jako pionowa karta w sidebarze i pozioma w głównym layoucie bez prop drilling.
Rust-based CSS parser zamiast PostCSS — pełny build CSS w 340ms zamiast 2–8 sekund, HMR poniżej 20ms. Zero runtime overhead w przeglądarce: cały CSS generowany statycznie podczas buildu, nie w JavaScript.
Pipeline `theme.json` → CSS custom properties → Tailwind utilities: jeden plik jako source of truth per site. Zmiana `primaryColor` w konfiguracji propaguje się do każdego komponentu bez dotykania kodu.
12.4 kb CSS na produkcji — tyle waży kompletny design system strony po JIT purge i minifikacji Lightning CSS. Pełna responsywność, container queries, 7 presetów tematycznych i dynamiczne motywy bez ani jednej linii CSS-in-JS runtime.