Tailwind CSS v4 in 2026: Der vollstaendige Leitfaden mit praktischen Beispielen

Tailwind CSS v4 stellt die groesste Ueberarbeitung dar, die das Framework seit seiner Einfuehrung erfahren hat. Anfang 2025 veroeffentlicht und 2026 vollstaendig ausgereift, fuehrt v4 ein CSS-first-Konfigurationssystem, eine komplett neu geschriebene Engine namens Oxide, drastische Leistungsverbesserungen und eine modernisierte Sammlung von Utilities ein. Wenn Sie bisher Tailwind v3 verwendet haben, veraendert das Upgrade auf v4 die Art und Weise, wie Sie ueber Konfiguration und Theming denken. Dieser Leitfaden fuehrt Sie durch alles, was Sie wissen muessen.

Was sich in Tailwind CSS v4 geaendert hat

Tailwind v4 ist nicht nur ein inkrementelles Update. Es ist ein grundlegendes Umdenken darueber, wie das Framework unter der Haube funktioniert. Hier sind die wichtigsten Aenderungen:

• CSS-first-Konfiguration: Keine tailwind.config.js mehr. Theme-Werte, benutzerdefinierte Utilities und Varianten werden alle direkt in CSS mit @theme und anderen Direktiven definiert.
• Oxide Engine: Eine neue Hochleistungs-Engine, geschrieben in Rust, die Parsing, Kompilierung und Klassenerkennung um Groessenordnungen schneller als v3 erledigt.
• Moderne CSS-Features: Integrierte Unterstuetzung fuer @layer, Cascade Layers, color-mix(), oklch(), Container Queries und @starting-style fuer Animationen.
• Vereinfachte Installation: Nur ein Paket ohne Konfiguration erforderlich, um loszulegen.
• Neues Standard-Theme: Eine erweiterte Farbpalette mit OKLCH, aktualisierte Abstandsskala und verbesserte Typografie-Standards.

Erste Schritte mit Tailwind CSS v4

Installation

Die Einrichtung von Tailwind v4 ist einfacher als je zuvor. Es wird kein separates PostCSS-Plugin oder keine Konfigurationsdatei benoetigt.

# Tailwind CSS v4 installieren
npm install tailwindcss @tailwindcss/vite

# Oder mit der CLI
npm install tailwindcss @tailwindcss/cli

Fuer ein Vite-basiertes Projekt fuegen Sie das Plugin Ihrer Vite-Konfiguration hinzu:

// vite.config.ts
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
});

Dann importieren Sie Tailwind in Ihre Haupt-CSS-Datei:

/* app.css */
@import "tailwindcss";

Das ist die gesamte Einrichtung. Keine tailwind.config.js, keine postcss.config.js, keine Content-Pfade zu konfigurieren. Die Oxide Engine erkennt automatisch Ihre Quelldateien und durchsucht sie nach Klassennamen.

Verwendung der CLI

Wenn Sie Vite nicht verwenden, funktioniert die CLI genauso gut:

npx @tailwindcss/cli -i app.css -o output.css --watch

CSS-first-Konfiguration mit @theme

Die groesste konzeptuelle Veraenderung in v4 ist, dass alle Anpassungen in CSS stattfinden, nicht in JavaScript. Die @theme-Direktive ersetzt das alte tailwind.config.js-Theme-Objekt.

Benutzerdefinierte Farben definieren

@import "tailwindcss";

@theme {
  --color-brand: #4f46e5;
  --color-brand-light: #818cf8;
  --color-brand-dark: #3730a3;
  --color-surface: #f8fafc;
  --color-surface-dark: #1e293b;
}

Diese CSS-Variablen werden automatisch als Tailwind Utilities verfuegbar:

<div class="bg-brand text-white">
  <h1 class="text-brand-light">Hello, Tailwind v4</h1>
</div>

Benutzerdefinierte Abstaende und Groessen

@theme {
  --spacing-18: 4.5rem;
  --spacing-128: 32rem;
  --width-content: 72rem;
  --width-sidebar: 20rem;
}

Benutzerdefinierte Schriften

@theme {
  --font-sans: "Inter", "system-ui", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
  --font-display: "Cal Sans", "Inter", sans-serif;
}

Ueberschreiben vs. Erweitern des Standard-Themes

Standardmaessig erweitert @theme das eingebaute Theme. Wenn Sie einen Namespace komplett ersetzen moechten, verwenden Sie den --*-Wildcard-Reset:

@theme {
  /* Alle Standardfarben entfernen, nur diese verwenden */
  --color-*: initial;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-primary: #2563eb;
  --color-secondary: #7c3aed;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-900: #111827;
}

Die Oxide Engine

Unter der Haube verwendet Tailwind v4 eine neue Engine namens Oxide, geschrieben in Rust und zu nativem Code kompiliert. Der Leistungsunterschied ist erheblich.

Leistungsverbesserungen

Die Oxide Engine liefert dramatische Geschwindigkeitsverbesserungen im Vergleich zur JavaScript-basierten v3-Engine:

• Initiale Build-Zeiten sind typischerweise 3-10x schneller, abhaengig von der Projektgroesse.
• Inkrementelle Neubauten waehrend der Entwicklung sind nahezu sofortig, oft unter 5 Millisekunden.
• Speicherverbrauch ist deutlich geringer, da Rust den Speicher ohne Garbage Collector verwaltet.

Fuer grosse Monorepo-Projekte mit Hunderttausenden von Klassen ist der Unterschied besonders spuerbar. Wo v3 mehrere Sekunden fuer einen vollstaendigen Neubau brauchte, schliesst v4 in Hunderten von Millisekunden ab.

Automatische Content-Erkennung

Eine der besten Verbesserungen der Lebensqualitaet ist, dass Sie keine Content-Pfade mehr angeben muessen. Die Oxide Engine erkennt und durchsucht Ihre Projektdateien automatisch. Sie verwendet Heuristiken, um Template-Dateien, JSX/TSX-Komponenten und andere Quellen von Klassennamen zu finden.

Wenn Sie Dateien explizit ein- oder ausschliessen muessen, koennen Sie die @source-Direktive verwenden:

@import "tailwindcss";

/* Zusaetzliche Quellpfade hinzufuegen */
@source "../shared-components/**/*.tsx";

/* Einen Pfad ausschliessen */
@source not "../node_modules";

Neue und aktualisierte Utility-Klassen

Tailwind v4 fuehrt mehrere neue Utilities ein und verfeinert bestehende, um moderne CSS-Features zu nutzen.

Container Queries

Container Queries ermoeglichen es Ihnen, Elemente basierend auf der Groesse ihres uebergeordneten Containers zu gestalten, anstatt des Viewports. Tailwind v4 bietet erstklassige Unterstuetzung.

<div class="@container">
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3 gap-4">
    <div class="p-4 bg-white rounded-lg">Card 1</div>
    <div class="p-4 bg-white rounded-lg">Card 2</div>
    <div class="p-4 bg-white rounded-lg">Card 3</div>
  </div>
</div>

Die @container-Klasse etabliert einen Containment-Kontext, und die @md:- und @lg:-Praefixe wenden Styles basierend auf der Container-Breite an.

Moderne Farbfunktionen

Tailwind v4 verwendet standardmaessig OKLCH-Farben, die einen wahrnehmungsmaessig einheitlichen Farbraum bieten. Sie koennen auch color-mix() fuer dynamische Farbmanipulation verwenden:

@theme {
  --color-primary: oklch(0.6 0.25 265);
  --color-primary-hover: oklch(0.5 0.25 265);
}

<button class="bg-primary hover:bg-primary-hover text-white px-4 py-2 rounded">
  Klick mich
</button>

3D-Transformationen

<div class="perspective-500">
  <div class="rotate-y-12 hover:rotate-y-0 transition-transform duration-300">
    <img src="/card.jpg" alt="3D-Karte" class="rounded-xl shadow-lg" />
  </div>
</div>

Neue Gradient Utilities

V4 erweitert die Gradient-Unterstuetzung mit zusaetzlichen Features:

<!-- Gradient mit Interpolation in OKLCH fuer weichere Uebergaenge -->
<div class="bg-linear-to-r from-blue-500 to-purple-500 bg-interpolate-oklch">
  Weicher Gradient
</div>

<!-- Konischer Gradient -->
<div class="bg-conic from-red-500 via-yellow-500 to-green-500">
  Farbkreis
</div>

Die not-Variante

Die not--Variante invertiert jede andere Variante, unterstuetzt durch CSS :not():

<div class="opacity-50 not-hover:opacity-100">
  Verblasst beim Hover statt zu erscheinen
</div>

<input class="border-gray-300 not-focus:border-transparent" />

Starting Style fuer Animationen

Die starting-Variante ermoeglicht es Ihnen, Styles fuer die @starting-style-Regel zu definieren, die Eintrittsanimationen fuer Elemente ermoeglicht, die im DOM erscheinen:

<dialog class="opacity-0 starting:opacity-0 open:opacity-100 transition-opacity">
  <p>Dieser Dialog blendet beim Oeffnen ein</p>
</dialog>

Responsives Design in v4

Responsives Design funktioniert konzeptionell auf die gleiche Weise, mit der vertrauten Breakpoint-Praefix-Syntax. Intern verwendet v4 jedoch moderne CSS-Features.

Standard-Breakpoints

Die Standard-Breakpoints bleiben praxistauglich:

Praefix	Mindestbreite	Gaengige Verwendung
sm	640px	Grosse Smartphones, Querformat
md	768px	Tablets
lg	1024px	Kleine Laptops
xl	1280px	Desktops
2xl	1536px	Grosse Bildschirme

Benutzerdefinierte Breakpoints

@theme {
  --breakpoint-xs: 475px;
  --breakpoint-3xl: 1920px;
}

<div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 3xl:grid-cols-4">
  <!-- Responsives Grid -->
</div>

Beispiel fuer responsives Layout

<header class="flex flex-col sm:flex-row items-center justify-between p-4 lg:px-8">
  <a href="/" class="text-xl font-bold">Brand</a>
  <nav class="hidden md:flex gap-6 text-sm font-medium">
    <a href="/features" class="hover:text-brand">Features</a>
    <a href="/pricing" class="hover:text-brand">Preise</a>
    <a href="/docs" class="hover:text-brand">Dokumentation</a>
  </nav>
  <button class="md:hidden p-2" aria-label="Menue">
    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
    </svg>
  </button>
</header>

Dark Mode

Tailwind v4 unterstuetzt weiterhin den Dark Mode mit der dark:-Variante. Standardmaessig wird die prefers-color-scheme-Media-Query verwendet, aber Sie koennen auf klassen- oder selektor-basiertes Umschalten wechseln.

Einfacher Dark Mode

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
  <h1 class="text-2xl font-bold">Willkommen</h1>
  <p class="text-gray-600 dark:text-gray-400">Dies passt sich Ihrem System-Theme an.</p>
</div>

Klassenbasierter Dark Mode

Um den Dark Mode mit JavaScript umzuschalten, anstatt sich auf die Systemeinstellung zu verlassen:

@import "tailwindcss";

@variant dark (&:where(.dark, .dark *));

Jetzt wird der Dark Mode aktiviert, wenn ein uebergeordnetes Element die Klasse dark hat:

<html class="dark">
  <body class="bg-white dark:bg-gray-950">
    <!-- Dark Mode aktiv -->
  </body>
</html>

// Dark Mode mit JavaScript umschalten
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
}

Aufbau einer Theme-bewussten Komponente

<div class="rounded-xl border border-gray-200 dark:border-gray-800
            bg-white dark:bg-gray-900
            shadow-sm dark:shadow-gray-950/50
            p-6">
  <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
    Einstellungen
  </h3>
  <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
    Verwalten Sie Ihre Kontoeinstellungen.
  </p>
  <button class="mt-4 px-4 py-2 rounded-lg
                 bg-brand text-white
                 hover:bg-brand-dark
                 focus:outline-none focus:ring-2 focus:ring-brand/50">
    Aenderungen speichern
  </button>
</div>

Animations-Utilities

Tailwind v4 erweitert die Animationsunterstuetzung erheblich und macht es einfacher, ansprechende Interaktionen ohne benutzerdefiniertes CSS zu erstellen.

Transition Utilities

<!-- Sanfter Hover-Effekt -->
<button class="bg-blue-600 hover:bg-blue-700
               transform hover:scale-105
               transition-all duration-200 ease-out
               text-white px-6 py-3 rounded-lg">
  Hover mich
</button>

<!-- Transition fuer bestimmte Eigenschaften -->
<div class="transition-colors duration-300 bg-gray-100 hover:bg-blue-100">
  Nur Farb-Transition
</div>

Eingebaute Animationen

<!-- Spin-Animation fuer Ladeindikatoren -->
<svg class="animate-spin h-5 w-5 text-white" viewBox="0 0 24 24">
  <!-- Spinner SVG -->
</svg>

<!-- Pulse-Animation -->
<div class="animate-pulse bg-gray-200 rounded h-4 w-3/4"></div>

<!-- Bounce -->
<div class="animate-bounce">Nach unten scrollen</div>

Benutzerdefinierte Animationen mit @theme

@theme {
  --animate-slide-in: slide-in 0.3s ease-out;
  --animate-fade-up: fade-up 0.5s ease-out;
}

@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

<div class="animate-slide-in">Gleitet von links herein</div>
<div class="animate-fade-up">Blendet nach oben ein</div>

Migration von Tailwind v3 auf v4

Die Migration von v3 auf v4 erfordert etwas Aufwand, aber das Tailwind-Team stellt ein Codemod-Tool bereit, das die meisten Aenderungen automatisch erledigt.

Das Upgrade-Tool ausfuehren

npx @tailwindcss/upgrade

Dieses Tool durchsucht Ihr Projekt und konvertiert automatisch die meisten v3-Muster in v4-Aequivalente. Es behandelt das Umbenennen von Utilities, die Migration der Konfiguration und die Aktualisierung von Imports.

Wichtige Migrationsaenderungen

v3	v4	Hinweise
tailwind.config.js	@theme in CSS	Konfiguration wandert in CSS
@tailwind base/components/utilities	@import "tailwindcss"	Einzelner Import
bg-opacity-50	bg-black/50	Opazitaets-Modifier-Syntax
text-opacity-75	text-white/75	Opazitaets-Modifier-Syntax
decoration-clone	box-decoration-clone	Umbenannt
flex-shrink-0	shrink-0	Vereinfacht (funktionierte bereits in v3)
flex-grow	grow	Vereinfacht
overflow-clip	overflow-clip	Gleich
content-Pfade in der Konfiguration	Automatische Erkennung	Keine Konfiguration noetig
darkMode: 'class' in der Konfiguration	@variant dark (...) in CSS	CSS-basiert

Manuelle Schritte

Ueberpruefen Sie nach dem Ausfuehren des Upgrade-Tools diese Bereiche manuell:

1. Benutzerdefinierte Plugins: v3-JavaScript-Plugins muessen als CSS mit @utility- und @variant-Direktiven umgeschrieben werden.
2. Benutzerdefinierte Theme-Werte: Verschieben Sie diese von tailwind.config.js in @theme-Bloecke in CSS.
3. Drittanbieter-Plugins: Ueberpruefen Sie, ob sie fuer v4-Kompatibilitaet aktualisiert wurden.

Konvertierung eines v3-Plugins zu v4

v3-Plugin (JavaScript):

// v3: tailwind.config.js Plugin
const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.text-balance': {
          'text-wrap': 'balance',
        },
      });
    }),
  ],
};

v4-Aequivalent (CSS):

/* v4: direkt in CSS definiert */
@utility text-balance {
  text-wrap: balance;
}

Konvertierung einer benutzerdefinierten v3-Variante

v3 (JavaScript):

// v3
plugin(function({ addVariant }) {
  addVariant('hocus', ['&:hover', '&:focus']);
});

v4 (CSS):

/* v4 */
@variant hocus (&:hover, &:focus);

Aufbau einer vollstaendigen Komponente

Lassen Sie uns alles zusammensetzen und eine Preiskarten-Komponente erstellen, die v4-Features demonstriert:

<div class="@container max-w-sm mx-auto">
  <div class="rounded-2xl border border-gray-200 dark:border-gray-800
              bg-white dark:bg-gray-900
              shadow-xl shadow-gray-900/5 dark:shadow-gray-950/50
              p-8
              transition-all duration-300
              hover:shadow-2xl hover:-translate-y-1">

    <h3 class="text-sm font-semibold text-brand uppercase tracking-wider">
      Pro Plan
    </h3>

    <div class="mt-4 flex items-baseline gap-1">
      <span class="text-5xl font-bold text-gray-900 dark:text-white">29 $</span>
      <span class="text-gray-500 dark:text-gray-400">/Monat</span>
    </div>

    <p class="mt-4 text-sm text-gray-600 dark:text-gray-400">
      Alles, was Sie brauchen, um schneller zu bauen und auszuliefern.
    </p>

    <ul class="mt-8 space-y-3 text-sm">
      <li class="flex items-center gap-3 text-gray-700 dark:text-gray-300">
        <svg class="w-5 h-5 text-brand shrink-0" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
        </svg>
        Unbegrenzte Projekte
      </li>
      <li class="flex items-center gap-3 text-gray-700 dark:text-gray-300">
        <svg class="w-5 h-5 text-brand shrink-0" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
        </svg>
        Prioritaets-Support
      </li>
      <li class="flex items-center gap-3 text-gray-700 dark:text-gray-300">
        <svg class="w-5 h-5 text-brand shrink-0" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
        </svg>
        Erweiterte Analysen
      </li>
    </ul>

    <button class="mt-8 w-full rounded-lg bg-brand py-3 text-sm font-semibold text-white
                   hover:bg-brand-dark
                   focus:outline-none focus:ring-2 focus:ring-brand/50 focus:ring-offset-2
                   dark:focus:ring-offset-gray-900
                   transition-colors duration-200">
      Jetzt starten
    </button>
  </div>
</div>

Fazit

Tailwind CSS v4 ist ein grosser Schritt vorwaerts fuer das Framework. Der Wechsel zur CSS-first-Konfiguration macht Projekte einfacher einzurichten und nachzuvollziehen. Die Oxide Engine eliminiert Build-Leistung als Problembereich. Und die neuen Utilities, aufgebaut auf modernen CSS-Features wie Container Queries und OKLCH-Farben, geben Ihnen leistungsfaehigere Werkzeuge bei weniger benutzerdefiniertem CSS.

Wenn Sie ein neues Projekt starten, gibt es keinen Grund, nicht v4 zu verwenden. Wenn Sie ein v3-Projekt pflegen, macht das Upgrade-Tool die Migration fuer die meisten Codebasen unkompliziert. Die Community und das Oekosystem haben v4 vollstaendig angenommen, und die Entwicklererfahrung ist besser als je zuvor.

Nutzen Sie unseren CSS zu Tailwind Konverter, um bestehendes CSS schnell zu konvertieren.

Beginnen Sie mit den neuen Features zu experimentieren, insbesondere Container Queries und die @theme-Direktive. Sie veraendern grundlegend, wie Sie an das Komponentendesign herangehen koennen, und sobald Sie sie uebernommen haben, fuehlt sich ein Zurueckgehen wie ein Rueckschritt an.