Tailwind CSS v4 ist ein Paradigmenwechsel. Mit der neuen Oxide Engine (geschrieben in Rust), CSS-first Konfiguration und nativen Container Queries hat sich das Framework grundlegend weiterentwickelt. Claude Code beherrscht diese neue Welt vollständig — und generiert damit modernes, performantes UI-Styling, ohne dass Entwickler eine einzige Zeile CSS manuell schreiben müssen.

In diesem Artikel zeigen wir, wie Claude Code Tailwind CSS v4 einsetzt: von der ersten Installation über die neue @theme-Direktive bis hin zu Container Queries und benutzerdefinierten Utilities. Mit realen Code-Beispielen und Best Practices für 2026.

⚡
Oxide Engine
Rust-basierter Core — bis zu 10x schnellere Build-Zeiten im Vergleich zu v3.
🎨
CSS-first Config
Kein tailwind.config.js mehr nötig. Alles läuft direkt in CSS via @import und @theme.
📈
Container Queries
Nativ integriert — komponenten-basiertes Responsive Design ohne externe Plugins.
🏘
3D Transforms
Neue Utilities für rotate-x-*, rotate-y-*, perspective-* und backface-hidden.

1. Tailwind v4 Neuerungen: CSS-first Konfiguration

Der größte Unterschied zwischen v3 und v4 ist die Abkehr von JavaScript-Konfiguration. In Tailwind CSS v4 wird alles direkt in der CSS-Datei definiert. Claude Code setzt diese neue Architektur konsequent um.

Installation mit Claude Code

Claude Code führt die Installation automatisch aus: npm install tailwindcss@next @tailwindcss/vite — und richtet die Vite-Integration korrekt ein, ohne manuelle Konfiguration.

Installation und Setup

# Tailwind CSS v4 installieren npm install tailwindcss@next @tailwindcss/vite # Oder mit PostCSS Plugin npm install tailwindcss@next @tailwindcss/postcss

Vite-Integration (vite.config.ts)

import { defineConfig } from 'vite' import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [ tailwindcss(), // Keine weiteren Optionen nötig ], })

CSS-first Konfiguration (app.css)

/* Tailwind v4: Nur ein Import reicht */ @import "tailwindcss"; /* Kein tailwind.config.js mehr nötig! Content-Erkennung erfolgt automatisch. Alle Custom-Einstellungen direkt in CSS. */
v4 NEU  Automatische Content-Erkennung: Tailwind v4 scannt automatisch alle relevanten Dateien im Projekt. Keine manuelle content-Array-Konfiguration mehr erforderlich. Claude Code muss daher keine Konfiguration mehr pflegen.

PostCSS-Alternative

/* postcss.config.mjs */ export default { plugins: { '@tailwindcss/postcss': {} } }
Feature Tailwind v3 Tailwind v4
Konfigurationsdatei tailwind.config.js CSS-first via @import
Build Engine JavaScript (PostCSS) Rust (Oxide)
Container Queries Plugin nötig Nativ integriert
3D Transforms Custom Native Utilities
Content Detection Manuell konfigurieren Automatisch
Design Tokens JS-Objekte CSS Custom Properties

2. @theme Design Tokens: CSS Custom Properties als Basis

Mit der neuen @theme-Direktive definiert Tailwind CSS v4 Design Tokens direkt als CSS Custom Properties. Claude Code nutzt diese Struktur konsequent, um kohärente Design-Systeme zu erstellen — ohne ein einziges JavaScript-Objekt.

Was ist @theme?

Die @theme-Direktive ermöglicht die Definition von Design-Token-Variablen, die Tailwind automatisch in Utility-Klassen umwandelt. --color-brand: #0ea5e9 wird z.B. zu bg-brand, text-brand, border-brand.

Farb-Tokens definieren

@import "tailwindcss"; @theme { /* Brand-Farben */ --color-brand: #0ea5e9; --color-brand-dark: #0284c7; --color-brand-light: #38bdf8; /* Semantische Farben */ --color-surface: #f8fafc; --color-border: #e2e8f0; --color-text-primary: #0f172a; --color-text-muted: #64748b; /* Status-Farben */ --color-success: #22c55e; --color-warning: #f59e0b; --color-error: #ef4444; }

Typografie-Tokens

@theme { /* Schriftfamilien */ --font-display: 'Cal Sans', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Schriftgrößen-Skala */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; /* Zeilenhöhen */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; }

Spacing und Breakpoints

@theme { /* Custom Spacing */ --spacing-section: 5rem; --spacing-component: 2rem; --spacing-element: 1rem; /* Breakpoints (überschreibt Tailwind-Defaults) */ --breakpoint-xs: 475px; --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; /* Border Radius */ --radius-card: 12px; --radius-button: 8px; --radius-pill: 9999px; }

Tokens in HTML verwenden

<!-- Tailwind generiert automatisch diese Utility-Klassen --> <div class="bg-brand text-white rounded-card p-component"> <h2 class="font-display text-3xl leading-tight"> Design Tokens in Aktion </h2> <p class="text-brand-light font-body text-lg leading-relaxed"> Aus @theme werden automatisch bg-, text-, border- und weitere Utility-Klassen generiert. </p> </div>
@theme  CSS Custom Properties leben: Da @theme-Variablen echte CSS Custom Properties sind, lassen sie sich auch in vanilla CSS verwenden: color: var(--color-brand). Claude Code nutzt das für maximale Flexibilität.

3. Core Utilities: Responsive, States und Dark Mode

Tailwind CSS v4 bringt alle bewährten Utilities aus v3 mit — erweitert um neue Varianten und verbesserter Syntax. Claude Code beherrscht die gesamte Utility-Palette und setzt sie situationsgerecht ein.

Responsive Breakpoints

<!-- Mobile-first Responsive Design --> <div class=" flex flex-col sm:flex-row gap-4 lg:gap-8 p-4 md:p-8 xl:p-12 text-base lg:text-lg w-full md:max-w-2xl xl:max-w-4xl mx-auto "> <!-- Inhalte --> </div> <!-- Breakpoint-Spezifische Sichtbarkeit --> <nav class="hidden md:flex">Desktop Navigation</nav> <button class="md:hidden">Mobile Menü</button>

Interaktions-States: Hover, Focus, Active

<!-- Button mit vollständigem State-Management --> <button class=" bg-brand text-white font-semibold px-6 py-3 rounded-button hover:bg-brand-dark focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 ease-in-out "> Jetzt starten </button> <!-- Link mit Hover-Animation --> <a class=" text-text-muted hover:text-brand underline-offset-4 hover:underline transition-colors duration-150 "> Mehr erfahren </a>

Dark Mode

<!-- Dark Mode via class-Strategie --> <div class=" bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-700 shadow-sm dark:shadow-none p-6 rounded-card "> <h3 class="text-slate-800 dark:text-white font-bold text-xl"> Karte mit Dark Mode Support </h3> <p class="text-slate-600 dark:text-slate-400 mt-2"> Reagiert automatisch auf System-Präferenz oder manuellen Toggle. </p> </div> /* CSS: Dark Mode Strategy */ @import "tailwindcss"; @custom-variant dark (&:where(.dark, .dark *)); /* Class-basiert */ /* Oder: @custom-variant dark (@media (prefers-color-scheme: dark)); */

Arbitrary Values

<!-- Exakte Werte per Arbitrary-Value-Syntax --> <div class=" w-[342px] h-[calc(100vh-64px)] bg-[#ff6b35] text-[13px] mt-[18px] grid-cols-[1fr_2fr_1fr] shadow-[0_4px_20px_rgba(0,0,0,0.12)] "> Pixelgenaue Werte ohne Custom CSS </div> <!-- Arbitrary Properties (neues v4 Feature) --> <div class="[paint-order:stroke_fill] [mask-type:luminance]"> Jede CSS-Property als Utility nutzbar </div>

Group und Peer States

<!-- group: Kinder-Elemente auf Parent-Hover reagieren lassen --> <div class="group relative overflow-hidden rounded-card bg-surface border border-border p-6"> <h3 class="font-bold text-xl group-hover:text-brand transition-colors"> Karten-Titel </h3> <p class="text-text-muted group-hover:text-text-primary transition-colors"> Beschreibung ändert Farbe beim Card-Hover. </p> <div class="absolute inset-x-0 bottom-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></div> </div>

4. Container Queries: Component-Level Responsive Design

Container Queries sind eines der wichtigsten neuen Features in Tailwind CSS v4 — und sie sind jetzt nativ integriert, ohne jedes externe Plugin. Claude Code setzt Container Queries ein, um wirklich modulare, kontextunabhängige Komponenten zu erstellen.

Warum Container Queries besser sind

Mit klassischen Media Queries reagiert eine Komponente auf die Viewport-Breite. Mit Container Queries reagiert sie auf die Breite ihres übergeordneten Containers — ideal für wiederverwendbare UI-Komponenten in verschiedenen Layouts.

Grundlegende Container-Query-Syntax

<!-- Schritt 1: Container definieren --> <div class="@container"> <!-- Schritt 2: Kinder reagieren auf Container-Breite --> <article class=" flex flex-col @sm:flex-row @md:gap-6 @lg:gap-10 gap-4 p-4 "> <img class="w-full @sm:w-48 @md:w-64 rounded-card object-cover" src="..." alt="..."> <div class="flex-1"> <h2 class="text-lg @md:text-xl @lg:text-2xl font-bold">Artikel-Titel</h2> <p class="text-text-muted @md:text-base text-sm">Beschreibung...</p> </div> </article> </div>

Benannte Container

<!-- Benannte Container für verschachtelte Layouts --> <main class="@container/main"> <aside class="@container/sidebar"> <!-- Reagiert auf sidebar-Container, nicht main --> <div class="@sm/sidebar:text-lg text-base"> Sidebar-Inhalt </div> <!-- Reagiert auf main-Container --> <div class="@xl/main:hidden"> Nur sichtbar wenn main-Container schmaler als xl </div> </aside> </main>

Größenbasierte Container (container-type)

/* In CSS: container-type für präzise Kontrolle */ @layer components { .card-container { container-type: inline-size; /* oder: size | normal */ container-name: card; } } <!-- Mit Tailwind-Utilities --> <div class="@container [container-type:size]"> <!-- Reagiert auf Höhe UND Breite --> <div class="@[300px]:text-lg @[500px]:text-xl @[800px]:text-2xl"> Skaliert mit dem Container </div> </div>

Praxisbeispiel: Adaptive Produktkarte

<!-- Dieselbe Komponente, verschiedene Layouts je nach Platz --> <div class="@container"> <div class=" bg-white rounded-card border border-border p-4 flex flex-col @sm:flex-row @sm:items-center @lg:gap-8 gap-4 "> <div class="aspect-square @sm:w-32 @md:w-48 bg-surface rounded-lg flex-shrink-0"> <!-- Produkt-Bild --> </div> <div class="flex-1 min-w-0"> <h3 class="font-bold text-base @md:text-lg @lg:text-xl truncate">Produktname</h3> <p class="text-text-muted text-sm @md:text-base mt-1 line-clamp-2 @lg:line-clamp-none"> Produktbeschreibung mit variablem Truncate-Verhalten. </p> <div class="flex items-center justify-between mt-3 @sm:mt-0 @md:flex-col @md:items-start @lg:flex-row @lg:items-center"> <span class="font-bold text-brand text-lg">€49,99</span> <button class="bg-brand text-white text-sm font-semibold px-4 py-2 rounded-button hover:bg-brand-dark transition-colors">Kaufen</button> </div> </div> </div> </div>
@container  Keine Plugin-Installation mehr nötig: In Tailwind v3 erforderte Container Queries das offizielle Plugin @tailwindcss/container-queries. In v4 sind Container Queries nativ Teil des Frameworks — Claude Code muss nichts zusätzlich installieren.

5. Custom Utilities & Plugins: @utility, @layer und Integrationen

Tailwind CSS v4 führt die neue @utility-Direktive ein, mit der eigene Utility-Klassen direkt in CSS definiert werden. Kombiniert mit @layer components und @apply entstehen vollständige Design-System-Komponenten. Claude Code integriert außerdem populäre Ökosystem-Tools wie shadcn/ui.

@utility: Eigene Utility-Klassen

@import "tailwindcss"; /* Eigene Utilities mit @utility */ @utility truncate-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } @utility glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); } @utility sr-focusable { position: absolute; width: 1px; height: 1px; clip: rect(0, 0, 0, 0); &:focus { position: static; width: auto; height: auto; clip: auto; } } <!-- Verwendung exakt wie eingebaute Utilities --> <p class="truncate-2 text-text-muted">Langer Text...</p> <div class="glass rounded-card p-6">Glassmorphism-Karte</div>

@layer components: Wiederverwendbare Komponenten

@layer components { .btn { @apply inline-flex items-center justify-center gap-2; @apply font-semibold text-sm; @apply px-4 py-2 rounded-button; @apply transition-all duration-200; @apply focus:outline-none focus:ring-2 focus:ring-offset-2; @apply disabled:opacity-50 disabled:cursor-not-allowed; } .btn-primary { @apply btn bg-brand text-white; @apply hover:bg-brand-dark; @apply focus:ring-brand; } .btn-secondary { @apply btn bg-surface text-text-primary border border-border; @apply hover:bg-slate-100; @apply focus:ring-slate-400; } .btn-ghost { @apply btn text-text-muted; @apply hover:bg-surface hover:text-text-primary; @apply focus:ring-slate-300; } .input-field { @apply w-full px-4 py-3 text-sm rounded-button; @apply bg-white border border-border text-text-primary; @apply placeholder:text-text-muted; @apply focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand; @apply disabled:bg-surface disabled:cursor-not-allowed; @apply transition-shadow duration-150; } }

shadcn/ui Integration mit Tailwind v4

# shadcn/ui für Tailwind v4 initialisieren npx shadcn@latest init # Komponenten hinzufügen npx shadcn@latest add button card input dialog /* globals.css — shadcn/ui nutzt @theme für Tokens */ @import "tailwindcss"; @theme { --color-background: hsl(0 0% 100%); --color-foreground: hsl(222.2 84% 4.9%); --color-card: hsl(0 0% 100%); --color-card-foreground: hsl(222.2 84% 4.9%); --color-primary: hsl(222.2 47.4% 11.2%); --color-primary-foreground: hsl(210 40% 98%); --color-muted: hsl(210 40% 96%); --color-muted-foreground: hsl(215.4 16.3% 46.9%); --color-accent: hsl(210 40% 96%); --color-destructive: hsl(0 84.2% 60.2%); --radius: 0.5rem; }

Plugin API: Plugins als CSS (neu in v4)

/* Tailwind v4: Plugins können als CSS geschrieben werden */ @plugin "./my-plugin.css"; /* my-plugin.css */ @utility animate-spin-slow { animation: spin 3s linear infinite; } @utility text-gradient { background: linear-gradient(135deg, var(--color-brand), var(--color-brand-light)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @utility hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; &:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } } <!-- Verwendung --> <h1 class="text-gradient font-black text-5xl">Gradient-Titel</h1> <div class="hover-lift rounded-card bg-white p-6">Hover mich</div>
Plugin  CSS-Plugins statt JavaScript: In Tailwind v4 können Plugins direkt als CSS-Dateien geschrieben werden. Kein JavaScript, kein Node-Modul-Overhead — nur deklaratives CSS. Claude Code bevorzugt diesen Ansatz für einfachere Wartbarkeit.

6. Performance & Best Practices: JIT, Bundle-Größe und Tools

Tailwind CSS v4 mit seiner Oxide Engine ist nicht nur schneller — es bietet auch neue Best Practices für optimale Bundle-Größe und Developer Experience. Claude Code wendet diese konsequent an.

JIT und Build-Performance

# Tailwind v4 Build-Performance im Vergleich # v3: ~200ms für ein mittelgroßes Projekt # v4: ~20ms — bis zu 10x schneller (Oxide Engine / Rust) # Development: Hot Reload in <5ms npx tailwindcss --watch # Production Build: Optimiertes CSS npx tailwindcss --minify --output dist/styles.css # Mit Vite (empfohlen): Automatische Integration vite build # Tailwind läuft im Vite-Plugin-Prozess

Bundle-Größe optimieren

/* Explizites Ausschließen von Utility-Gruppen */ @import "tailwindcss/preflight"; /* Nur Reset */ @import "tailwindcss/utilities"; /* Nur Utilities */ /* KEIN tailwindcss/base oder tailwindcss/components */ /* Oder: Komplett granular */ @import "tailwindcss/theme"; @import "tailwindcss/utilities"; /* @source: Explizite Pfade für Content-Detection */ @source "./src/**/*.{html,tsx,ts}"; @source "./components/**/*.tsx"; /* Schließt node_modules automatisch aus */

class-variance-authority (CVA) mit Tailwind v4

// Typsichere Varianten-Komponenten mit cva import { cva, type VariantProps } from 'class-variance-authority' const buttonVariants = cva( // Basis-Klassen 'inline-flex items-center justify-center gap-2 font-semibold rounded-button transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed', { variants: { variant: { primary: 'bg-brand text-white hover:bg-brand-dark focus:ring-brand', secondary: 'bg-surface text-text-primary border border-border hover:bg-slate-100 focus:ring-slate-400', ghost: 'text-text-muted hover:bg-surface hover:text-text-primary focus:ring-slate-300', destructive: 'bg-error text-white hover:bg-red-700 focus:ring-error', }, size: { sm: 'px-3 py-1.5 text-xs', md: 'px-4 py-2 text-sm', lg: 'px-6 py-3 text-base', xl: 'px-8 py-4 text-lg', }, }, defaultVariants: { variant: 'primary', size: 'md', }, } ) interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {} export function Button({ variant, size, className, ...props }: ButtonProps) { return ( <button className={buttonVariants({ variant, size, className })} {...props} /> ) }

clsx und tailwind-merge

// cn()-Hilfsfunktion — Standard in modernen Tailwind-Projekten import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } // Verwendung: Konflikte automatisch auflösen cn('px-4 py-2', 'px-6') // → 'py-2 px-6' (px-4 wird überschrieben) cn('text-sm text-red-500', isLarge && 'text-lg', className) // Konditional // In Komponenten function Card({ className, ...props }) { return ( <div className={cn( 'bg-white rounded-card border border-border p-6 shadow-sm', 'hover:shadow-md transition-shadow duration-200', className // Externe Klassen überschreiben intern )} {...props} /> ) }

3D Transforms (neu in v4)

<!-- Neue 3D-Transform-Utilities in v4 --> <div class="perspective-1000 [transform-style:preserve-3d]"> <div class=" rotate-x-12 rotate-y-[-15deg] hover:rotate-x-0 hover:rotate-y-0 transition-transform duration-500 backface-hidden rounded-card bg-white p-8 shadow-xl "> 3D-Karte mit echtem Perspective-Effekt </div> </div> <!-- Flip-Card Effekt --> <div class="group perspective-1000 cursor-pointer"> <div class="relative [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)] transition-transform duration-700"> <div class="backface-hidden bg-brand text-white p-8 rounded-card">Vorderseite</div> <div class="absolute inset-0 backface-hidden [transform:rotateY(180deg)] bg-slate-900 text-white p-8 rounded-card">Rückseite</div> </div> </div>

Best Practices-Checkliste

Tailwind CSS v4 @theme Container Queries @utility Oxide Engine CSS-first Config shadcn/ui cva tailwind-merge Dark Mode Claude Code Vite 3D Transforms @layer @apply

Claude Code für dein Tailwind-Projekt

Lass Claude Code dein nächstes UI-Projekt mit Tailwind CSS v4 aufbauen — CSS-first, performant und mit modernem Design-System.

Kostenlos testen →