Design & UI
Tailwind Design System (v4)
Design-Tokens, Komponenten-Varianten und Dark Mode mit Tailwind CSS v4 aufbauen
Dieser Skill liefert Anleitung und Referenzmaterial zum Aufbau skalierbarer Design-Systeme mit Tailwind CSS v4. Im Zentrum steht die neue CSS-first-Konfiguration über @theme, mit der Farb-, Radius- und Animationstoken direkt in CSS statt in einer tailwind.config.ts definiert werden. Enthalten sind konkrete Beispiele für OKLCH-basierte Farbpaletten, semantische Token-Hierarchien und eine funktionierende Dark-Mode-Umsetzung per @custom-variant.
Neben der Quick-Start-Konfiguration zeigt eine Vergleichstabelle die wichtigsten Änderungen gegenüber Tailwind v3, was die Migration bestehender Projekte erleichtert. Weiterführende Muster zu Komponentenarchitektur, Varianten und Responsive-Patterns sind in einer separaten Referenzdatei ausgelagert und werden bei Bedarf nachgeladen. Der Skill eignet sich für Frontend-Teams, die Komponentenbibliotheken vereinheitlichen oder von Tailwind v3 auf v4 umstellen.
FAQ
Häufige Fragen zu Tailwind Design System (v4)
- Funktioniert dieser Skill auch mit Tailwind CSS v3?
- Nein, der Skill ist speziell auf Tailwind CSS v4 ausgelegt und nutzt dessen CSS-first-Konfiguration über @theme. Für v3-Projekte verweist die SKILL.md auf den offiziellen Upgrade-Guide von Tailwind. Die enthaltene Vergleichstabelle zeigt jedoch die wichtigsten Unterschiede zwischen v3 und v4, was bei einer geplanten Migration hilfreich ist.
- Welche Voraussetzungen müssen für den Einsatz erfüllt sein?
- Vorausgesetzt wird ein Projekt, das bereits auf Tailwind CSS v4 (ab 2024) läuft oder dorthin migriert werden soll, sowie ein Build-Setup, das CSS-Importe wie @import 'tailwindcss' unterstützt. Der Skill selbst liefert Anleitung und Referenzmaterial, ersetzt aber nicht die Grundinstallation von Tailwind v4 im Projekt.
- Was steckt in der ausgelagerten Referenzdatei references/details.md?
- Dort sind laut SKILL.md ausführlichere Muster und Beispiele zu Komponentenarchitektur, Varianten-Systemen und Responsive-Patterns hinterlegt. Diese Datei wird nur bei Bedarf nachgeladen, wenn die Kurzübersicht in der Haupt-SKILL.md für den konkreten Anwendungsfall nicht ausreicht.
- Für wen lohnt sich dieser Skill konkret?
- Vor allem für Frontend-Teams, die eine Komponentenbibliothek mit einheitlichen Design-Tokens aufbauen, Dark Mode nach v4-Standard umsetzen oder ein Tailwind-v3-Projekt auf v4 umstellen wollen. Wer bereits eine funktionierende v3-Konfiguration hat und nicht migrieren möchte, profitiert weniger, da der Fokus klar auf der neuen CSS-first-Syntax liegt.