Tailwind CSS v4 — Was die neue Version wirklich bringt

Tailwind CSS v4 ist nicht einfach ein Update — es ist ein Ground-up Rewrite. Die neue Oxide Engine, CSS-first Konfiguration und native CSS-Imports verändern grundlegend, wie wir mit Tailwind arbeiten. Nach der Migration mehrerer Projekte auf v4 hier mein Erfahrungsbericht.

Die neue Oxide Engine

Die Oxide Engine ist in Rust geschrieben und macht Tailwind bis zu 5x schneller. Build-Zeiten von 600ms schrumpfen auf rund 120ms. Technisch nutzt Oxide einen inkrementellen Ansatz: Statt bei jeder Änderung alle Dateien neu zu scannen, trackt die Engine nur die Änderungen. Dazu kommt Zero-Config Content Detection — in v3 musstest du explizit angeben, welche Dateien Tailwind scannen soll, in v4 erkennt Tailwind das automatisch.

CSS-first Konfiguration

Der größte Paradigmenwechsel: Die tailwind.config.js ist Geschichte. In v4 konfigurierst du alles direkt in CSS mit der @theme Direktive. Custom Colors, Spacing, Fonts, Breakpoints — alles lebt jetzt in deiner CSS-Datei. Der Vorteil geht über Ästhetik hinaus: CSS-Variablen sind zur Laufzeit verfügbar. Du kannst Theme-Werte in JavaScript lesen, Dark Mode per CSS-Variable umschalten und dynamische Themes bauen — ohne Build-Step.

Neue Features in v4

• Native Cascade Layers via CSS @layer für volle Kontrolle über Spezifität
• Built-in Container Queries mit @container Varianten — endlich responsive Komponenten, die sich an ihren Container anpassen
• 3D Transform Utilities wie rotate-x-45 und translate-z-10
• OKLCH Colors als Standard-Farbraum für perceptuell gleichmäßige Farbskalen
• Automatische Varianten wie hover:, focus:, dark: ohne explizite Aktivierung

Migration von v3

Die Migration ist überraschend smooth. Das offizielle Upgrade-Tool (npx @tailwindcss/upgrade) konvertiert deine tailwind.config.js in CSS @theme Direktiven und passt Imports an. In Vite-Setups wie Astro nutzt du @tailwindcss/vite statt der alten PostCSS-Integration. Die meiste Zeit geht für Testing drauf, nicht für die Migration selbst — plane 30-60 Minuten pro Projekt.

Fazit

Tailwind v4 ist ein Pflicht-Update. Die Performance-Verbesserungen allein rechtfertigen die Migration, und die CSS-first Config macht die Developer Experience deutlich besser. Der Oxide-Engine-Rewrite ist die Art von technischer Investition, die sich über Jahre auszahlt. Wer noch auf v3 sitzt, sollte jetzt upgraden.