Skip to main content

Öffnungszeiten

Mo-Fr.: 18:00 - 22:00 Uhr
Sa+So.: 10:00 - 22:00 Uhr

Tailwind CSS v4: Das Framework hat sich selbst neu erfunden

Tailwind CSS v4: Das Framework hat sich selbst neu erfunden

Written by
ctmo
Published on
25.01.2025

Nein, Tailwind CSS v4 ist nicht das, was man von einem 'Update' erwartet. Adam Wathans Team hat das Framework nicht mal eben renoviert, sondern gleich komplett abgerissen und neu gebaut. Im Fundament steckt jetzt „Oxide": eine in Rust geschriebene Engine, die den bisherigen JavaScript-Compiler ersetzt. Die Zahlen, die das Team selbst veröffentlicht hat, klingen nach Marketing-Floskel, sind aber bemerkenswert: Volle Builds laufen rund 3,5- bis 5-mal schneller, inkrementelle Builds über 8-mal schneller. Wenn keine neue CSS-Datei kompiliert werden muss, sind es sogar 100-mal schneller – gemessen in Mikrosekunden. Wer schon mal in einem größeren Next.js-Projekt auf den Tailwind-Watcher gewartet hat, weiß, was das praktisch bedeutet.

Doch die Performance ist nur der halbe Bruch. Der eigentliche Paradigmenwechsel: Die geliebte (oder verfluchte) `tailwind.config.js` ist Geschichte. Konfiguration findet jetzt dort statt, wo CSS ohnehin lebt – in CSS selbst, via `@theme`-Direktive. Statt JavaScript-Objekten editiert man Custom Properties. Theme, Farben, Spacing-Scale, Breakpoints: alles deklariert in einer Sprache, die der Browser ohnehin versteht. Ein einziges `@import "tailwindcss";` ersetzt den bisherigen Setup-Boilerplate.

Tailwind v4 stützt sich dabei demonstrativ auf moderne Web-Plattform-Features, die jahrelang in den Specs herumgeisterten und endlich produktionstauglich sind: Cascade Layers für Spezifitätskontrolle, registered Custom Properties via `@property` (Hallo, animierbare Gradienten), `color-mix()` für native Farbmanipulation und logische Eigenschaften für müheloses RTL-Support. Die neue Default-Palette setzt auf den OKLCH-Farbraum – auf modernen P3-Displays sehen die Töne sichtbar lebendiger aus, ohne dass irgendwo eine `<canvas>` flackert.

Die Migration von v3? Ehrlich gesagt: nicht trivial. Es ist ein Breaking Release, und alles, was tief in der `tailwind.config.js` verwurzelt war, muss umziehen. Das Team liefert dafür einen Codemod (`@tailwindcss/upgrade`), der den Großteil automatisiert – aber wer in v3 die Plugin-API gestreichelt hat, sollte einen Nachmittag einplanen und ein bisschen seufzen.

Mit den Folgereleases v4.1 (Text-Shadows, Masken), v4.2 und v4.3 (Scrollbar-Styling, Zoom-Utilities, neue Logical Properties) bleibt das Tempo hoch. Tailwind hat sich vom „nur eine weitere Utility-First-Lib" endgültig zum strategisch wichtigen Stück Infrastruktur entwickelt – jenes Stück Software, das man unbemerkt jeden Tag verwendet, das aber bei Ausfall sofort spürbar wäre.

Kurzum: v4 ist kein Update, sondern eine Ansage. Frontend-Tooling rückt näher an den Browser, weiter weg vom Node-Ökosystem, und schneller in jeder Hinsicht. Das Framework, das einst als „inline styles für Erwachsene" belächelt wurde, hat sich endgültig zum Industriestandard entwickelt.