In den eigenen Worten des Skills
Baut produktionsreife Design-Systeme auf Basis von Tailwind CSS v4 (2024+) auf. Es führt durch die CSS-first-Konfiguration, bei der @theme in app.css tailwind.config.ts ersetzt, semantische Farb-Token in OKLCH, Radius- und Animation-Token, deren Keyframes innerhalb von @theme liegen, klassenbasierten Dark Mode über @custom-variant sowie Basisstile in @layer base.
Es legt außerdem die Token-Hierarchie von Brand über Semantic bis Component-Token dar, eine Komponentenarchitektur mit Basisstilen, Varianten, Größen, Zuständen und Overrides, sowie responsive und barrierefreie Komponentenmuster. Geschrieben für Teams, die eine Komponentenbibliothek erstellen, UI-Muster in einer Codebasis vereinheitlichen oder von Tailwind v3 migrieren.
So funktioniert es
- 01Tailwind im CSS-Einstiegspunkt importieren
app.css beginnt mit einem einzigen @import statt den v3-Direktiven @tailwind base/components/utilities.
- 02Den semantischen Token-Satz unter @theme deklarieren
Background, foreground, primary, secondary, muted, accent, destructive, border, ring und card werden alle als Farb-Token in OKLCH deklariert.
- 03Animation-Token mit ihren Keyframes hinzufügen
--animate-fade-in und --animate-fade-out laufen mit 0,2s, --animate-slide-in und --animate-slide-out mit 0,3s, jeweils mit einem passenden @keyframes-Block innerhalb von @theme.
- 04Dieselben Token-Namen unter .dark überschreiben
Der Dark-Block weist jedem Token einen neuen Wert zu, statt neue Namen einzuführen, und spiegelt background, foreground, primary, secondary, muted, accent, destructive, border, ring, card und ring-offset.
- 05Standardwerte des Base Layer festlegen
@layer base wendet border-border auf jedes Element an und gibt body den themenspezifischen Hintergrund, die Vordergrundfarbe und Antialiasing.
- 06Komponenten in Layer-Reihenfolge aufbauen
Komponenten durchlaufen Basisstile, Varianten, Größen, Zustände und Overrides in dieser Reihenfolge.