Tailwind CSS Muster (v4 - 2025)
Moderne Utility-first-CSS mit CSS-nativer Konfiguration.
1. Tailwind v4 Architektur
Was sich gegenüber v3 geändert hat
| v3 (Legacy) | v4 (Aktuell) |
|---|
tailwind.config.js | CSS-basierte @theme-Direktive |
| PostCSS-Plugin | Oxide-Engine (10x schneller) |
| JIT-Modus | Nativ, immer aktiv |
| Plugin-System | CSS-native Features |
@apply-Direktive | Funktioniert noch, wird aber nicht empfohlen |
v4 Kernkonzepte
| Konzept | Beschreibung |
|---|
| CSS-first | Konfiguration in CSS, nicht in JavaScript |
| Oxide Engine | Rust-basierter Compiler, viel schneller |
| Native Nesting | CSS-Verschachtelung ohne PostCSS |
| CSS-Variablen | Alle Tokens als --*-Variablen verfügbar |
2. CSS-basierte Konfiguration
Theme-Definition
@theme {
--color-primary: oklch(0.7 0.15 250);
--color-surface: oklch(0.98 0 0);
--color-surface-dark: oklch(0.15 0 0);
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
Erweitern vs. Überschreiben
| Aktion | Verwendung |
|---|
| Erweitern | Neue Werte neben den Standardwerten hinzufügen |
| Überschreiben | Standard-Skala vollständig ersetzen |
| Semantische Tokens | Projektspezifische Namensgebung (primary, surface) |
3. Container Queries (v4 nativ)
Breakpoint vs. Container
| Typ | Reagiert auf |
|---|
Breakpoint (md:) | Viewport-Breite |
Container (@container) | Breite des übergeordneten Elements |
Container Query Verwendung
| Muster | Klassen |
|---|
| Container definieren | @container auf dem Elternelement |
| Container-Breakpoint | @sm:, @md:, @lg: auf Kindelementen |
| Benannte Container | @container/card für Spezifität |
Wann verwenden
| Szenario | Verwendung |
|---|
| Layouts auf Seitenebene | Viewport-Breakpoints |
| Responsive auf Komponentenebene | Container Queries |
| Wiederverwendbare Komponenten | Container Queries (kontextunabhängig) |
4. Responsives Design
Breakpoint-System
| Präfix | Min. Breite | Ziel |
|---|
| (keines) | 0px | Mobile-First-Basis |
sm: | 640px | Großes Smartphone / kleines Tablet |
md: | 768px | Tablet |
lg: | 1024px | Laptop |
xl: | 1280px | Desktop |
2xl: | 1536px | Großer Desktop |
Mobile-First-Prinzip
- Mobile Styles zuerst schreiben (ohne Präfix)
- Überschreibungen für größere Bildschirme mit Präfixen hinzufügen
- Beispiel:
w-full md:w-1/2 lg:w-1/3
5. Dark Mode
Konfigurationsstrategien
| Methode | Verhalten | Verwendung |
|---|
class | .dark-Klasse schaltet um | Manueller Theme-Umschalter |
media | Folgt Systemeinstellung | Keine Benutzersteuerung |
selector | Benutzerdefinierter Selektor (v4) | Komplexe Theming |
Dark Mode Muster
| Element | Hell | Dunkel |
|---|
| Hintergrund | bg-white | dark:bg-zinc-900 |
| Text | text-zinc-900 | dark:text-zinc-100 |
| Rahmen | border-zinc-200 | dark:border-zinc-700 |
6. Moderne Layout-Muster
Flexbox-Muster
| Muster | Klassen |
|---|
| Zentrieren (beide Achsen) | flex items-center justify-center |
| Vertikaler Stapel | flex flex-col gap-4 |
| Horizontale Reihe | flex gap-4 |
| Verteilt | flex justify-between items-center |
| Umbruch-Raster | flex flex-wrap gap-4 |
Grid-Muster
| Muster | Klassen |
|---|
| Auto-fit responsiv | grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] |
| Asymmetrisch (Bento) | grid grid-cols-3 grid-rows-2 mit Spans |
| Sidebar-Layout | grid grid-cols-[auto_1fr] |
Hinweis: Bevorzugen Sie asymmetrische/Bento-Layouts gegenüber symmetrischen 3-Spalten-Rastern.
7. Modernes Farbsystem
OKLCH vs. RGB/HSL
| Format | Vorteil |
|---|
| OKLCH | Wahrnehmungsgleichmäßig, besser für Design |
| HSL | Intuitiver Farbton/Sättigung |
| RGB | Legacy-Kompatibilität |
Farb-Token-Architektur
| Ebene | Beispiel | Zweck |
|---|
| Primitiv | --blue-500 | Rohfarbwerte |
| Semantisch | --color-primary | Zweckbasierte Benennung |
| Komponente | --button-bg | Komponentenspezifisch |
8. Typografie-System
Schriftarten-Stapel-Muster
| Typ | Empfohlen |
|---|
| Serifenlos | 'Inter', 'SF Pro', system-ui, sans-serif |
| Mono | 'JetBrains Mono', 'Fira Code', monospace |
| Display | 'Outfit', 'Poppins', sans-serif |
Schriftgrößen-Skala
| Klasse | Größe | Verwendung |
|---|
text-xs | 0.75rem | Labels, Bildunterschriften |
text-sm | 0.875rem | Sekundärtext |
text-base | 1rem | Fließtext |
text-lg | 1.125rem | Einleitungstext |
text-xl+ | 1.25rem+ | Überschriften |
9. Animation & Übergänge
Eingebaute Animationen
| Klasse | Effekt |
|---|
animate-spin | Kontinuierliche Drehung |
animate-ping | Aufmerksamkeitssignal |
animate-pulse | Subtiler Deckkraft-Puls |
animate-bounce | Hüpfeffekt |
Übergangs-Muster
| Muster | Klassen |
|---|
| Alle Eigenschaften | transition-all duration-200 |
| Spezifische | transition-colors duration-150 |
| Mit Beschleunigung | ease-out oder ease-in-out |
| Hover-Effekt | hover:scale-105 transition-transform |
10. Komponentenextraktion
Wann extrahieren
| Signal | Aktion |
|---|
| Dieselbe Klassenkombination 3+ Mal | Komponente extrahieren |
| Komplexe Zustandsvarianten | Komponente extrahieren |
| Design-System-Element | Komponente extrahieren + dokumentieren |
Extraktionsmethoden
| Methode | Verwendung |
|---|
| React/Vue-Komponente | Dynamisch, JS erforderlich |
| @apply in CSS | Statisch, kein JS erforderlich |
| Design-Tokens | Wiederverwendbare Werte |
11. Anti-Patterns
| Nicht | Sondern |
|---|
| Überall beliebige Werte | Design-System-Skala verwenden |
!important | Spezifität korrigieren |
Inline style= | Utility-Klassen verwenden |
| Doppelte lange Klassenlisten | Komponente extrahieren |
| v3-Konfiguration mit v4 mischen | Vollständig auf CSS-first migrieren |
@apply stark verwenden | Komponenten bevorzugen |
12. Leistungsprinzipien
| Prinzip | Implementierung |
|---|
| Unbenutzte entfernen | Automatisch in v4 |
| Dynamik vermeiden | Keine Template-String-Klassen |
| Oxide verwenden | Standard in v4, 10x schneller |
| Builds cachen | CI/CD-Caching |
Denken Sie daran: Tailwind v4 ist CSS-first. Nutzen Sie CSS-Variablen, Container Queries und native Funktionen. Die Konfigurationsdatei ist jetzt optional.