Tailwind CSS v4: The New Design System Paradigm

Tailwind CSS v4 ist kein inkrementelles Update. Es ist eine vollständige Neudefinition der Frage: Wo wird ein Design System konfiguriert? Die Antwort in v4 ist eindeutig: in CSS. Das tailwind.config.js ist Geschichte. An seine Stelle tritt der @theme-Directive — ein CSS-nativer Ansatz zur Design-Token-Definition.

CSS-First: Die neue Konfigurationsphilosophie

In Tailwind v3 war die Konfiguration in JavaScript definiert: Farben, Spacing, Breakpoints, Fonts — alles in tailwind.config.js oder tailwind.config.ts. Das hatte Vorteile (TypeScript-Support, programmatische Konfiguration), aber auch fundamentale Nachteile: Die Konfiguration war vom CSS-Layer getrennt, musste zur Build-Zeit ausgewertet werden und war für Designer ohne JavaScript-Kenntnisse schwer zugänglich.

/* Tailwind v4 — CSS-native Design Token Definition */
@import "tailwindcss";

/* Alle Design Tokens im @theme Block */
@theme {
    /* Farb-Palette */
    --color-navy: #001f3f;
    --color-brand-white: #ffffff;
    --color-brand-black: #000000;

    /* Typografie */
    --font-sans: var(--font-geist-sans), system-ui, sans-serif;
    --font-mono: var(--font-geist-mono), monospace;

    /* Spacing */
    --spacing-section: 11rem;

    /* Breakpoints (optional: Override der Defaults) */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
}

/* Globale Basis-Styles */
@layer base {
    *, ::after, ::before {
        box-sizing: border-box;
    }
}

PostCSS Plugin: Zero Configuration

Tailwind v4 ersetzt den bisherigen PostCSS-Setup durch ein einzelnes Plugin: @tailwindcss/postcss. Kein separates autoprefixer, keine komplexe Konfiguration, keine Build-Tool-spezifischen Adapter. Das Plugin erkennt Tailwind-Klassen automatisch, generiert die notwendigen Styles und optimiert das Output-Bundle.

// postcss.config.mjs
const config = {
    plugins: {
        "@tailwindcss/postcss": {},
    },
};

export default config;

// VERGLEICH: Tailwind v3 postcss.config.js
// const config = {
//   plugins: {
//     tailwindcss: {},
//     autoprefixer: {},
//   },
// };

Design Tokens als CSS Custom Properties

Der eleganteste Aspekt von Tailwind v4 ist die direkte Korrespondenz zwischen @theme-Tokens und CSS Custom Properties. Ein im @theme-Block definierter Wert ist gleichzeitig eine Tailwind-Utility-Klasse und eine CSS Variable, die überall im Stylesheet genutzt werden kann. Kein Mapping, keine Transformation — pure CSS-Semantik.

Performance: Messbare Build-Zeit-Verbesserungen

Tailwind v4 ist signifikant schneller als v3. Der neue Oxide-Engine (in Rust geschrieben) ersetzt den bisherigen JavaScript-basierten Scanner. In unseren Projekten haben wir Build-Zeit-Reduktionen von 35-60% beobachtet — besonders signifikant in großen Codebasen mit vielen Komponenten.

• Incremental Builds: Nur geänderte Files werden neu gescannt — deutliche Verbesserung bei watch-Mode
• Rust-basierter Oxide-Engine: 5-10x schnellerer Content-Scan als der JavaScript-basierte Vorgänger
• Lightning CSS: Optionaler CSS-Minifier und Transformer, der autoprefixer ersetzt
• Kleinere Output-Bundles: Verbessertes Dead-Code-Elimination für Styles