Tailwind CSS v4 mit Claude Code: CSS-First Konfiguration 2026
Tailwind CSS v4 ist das größte Update seit dem Launch — CSS-First Konfiguration ersetzt tailwind.config.js, Lightning CSS als neue Engine, native CSS Variables und massiv schnellere Build-Zeiten. Claude Code migriert und nutzt v4 vollständig.
Was ist neu in Tailwind v4?
NeuDie wichtigsten Änderungen auf einen Blick
# Tailwind v4 Kernänderungen — Claude Code kennt alle Details:
# 1. CSS-First Konfiguration (STATT tailwind.config.js)
# 2. Lightning CSS Engine (5-10x schneller als PostCSS)
# 3. Native CSS Custom Properties für alle Design Tokens
# 4. Automatisches Content Detection (kein content: [] mehr)
# 5. Neue Utility-Klassen: field-sizing, starting-style, etc.
# 6. oklch()-Farbraum statt hex/rgb
# Installation:
npm install tailwindcss@next @tailwindcss/vite
# vite.config.ts:
import tailwindcss from '@tailwindcss/vite'
export default {
plugins: [tailwindcss()] // Kein PostCSS Plugin mehr nötig!
}
# CSS Entry Point (statt @tailwind directives):
@import "tailwindcss"; /* Eine Zeile — fertig! */
CSS-First Konfiguration
ConfigDesign Tokens in CSS statt JavaScript
# Prompt: "Migriere diese tailwind.config.js zu Tailwind v4 CSS-Konfiguration"
/* app.css — Claude Code konvertiert: */
@import "tailwindcss";
@theme {
/* Farben: oklch() für größeren Farbraum */
--color-primary: oklch(0.62 0.19 255);
--color-primary-dark: oklch(0.50 0.20 255);
--color-accent: oklch(0.75 0.18 160);
/* Schriftarten */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Spacing-Erweiterungen */
--spacing-18: 4.5rem;
--spacing-128: 32rem;
/* Border Radius */
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
/* Animationen */
--animate-fade-in: fade-in 0.3s ease-out;
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Eigene Utilities (neu in v4): */
@utility container-query {
container-type: inline-size;
}
Migration-Tipp: "Migriere meine tailwind.config.js zu Tailwind v4 CSS-Format. Erkläre alle Breaking Changes." Claude Code analysiert eure Konfiguration und generiert die äquivalente @theme CSS-Konfiguration — inklusive Hinweisen auf entfernte Klassen.
Neue Utility-Klassen in v4
UtilitiesWas ist neu nutzbar?
<!-- field-sizing: Textarea wächst mit Content -->
<textarea class="field-sizing-content min-h-20 resize-none" />
<!-- starting-style: Einblend-Animationen (native!) -->
<div class="opacity-100 starting:opacity-0 transition-opacity">
Sanft eingeblendet beim ersten Render
</div>
<!-- Container Queries (ohne Plugin!) -->
<div class="@container">
<div class="grid @md:grid-cols-2 @lg:grid-cols-3">
<!-- Reagiert auf Container-Breite, nicht Viewport! -->
</div>
</div>
<!-- Neue Varianten -->
<button class="pointer-coarse:p-4 pointer-fine:p-2">Touch-optimiert</button>
<p class="motion-reduce:transition-none transition-all">Barrierefrei</p>
<!-- Composing Utilities mit @apply (weiterhin möglich) -->
/* btn-primary.css */
.btn-primary {
@apply px-4 py-2 rounded-lg font-semibold;
background: var(--color-primary);
}
Performance: Lightning CSS vs PostCSS
PerformanceDrastisch schnellere Build-Zeiten
# Benchmark — Tailwind v3 vs v4 (reale Projektgröße):
# v3 (PostCSS): Initial Build: ~800ms HMR: ~120ms
# v4 (Lightning): Initial Build: ~90ms HMR: ~8ms
# → 10x schnellerer Build, 15x schnelleres HMR
# Lightning CSS übernimmt außerdem:
# ✅ Autoprefixer (kein separates Plugin mehr!)
# ✅ CSS Nesting (native Browser-Feature)
# ✅ @import bundling
# ✅ Minification
# Migration Cheatsheet (häufige Änderungen):
# v3: shadow-sm → v4: shadow-xs
# v3: blur-sm → v4: blur-xs
# v3: ring-0 (default) → v4: ring (0px statt 3px default!)
# v3: text-opacity-* → v4: text-*/50 (opacity modifier)
# v3: bg-opacity-50 → v4: bg-black/50
# Automatische Migration:
npx @tailwindcss/upgrade
Android WebView Warnung: Tailwind v4 nutzt
oklch()-Farben, die ältere Android WebViews (Chrome <111) NICHT unterstützen. Für Android-Apps: Tailwind v3 oder oklch() Fallback-Farben definieren.CSS-Modul im Kurs
Im Claude Code Mastery Kurs: vollständiges Tailwind v4 Modul mit Migration von v3, CSS-First Konfiguration, Container Queries, neuen Utilities und Performance-Optimierung.
14 Tage kostenlos testen →