Dans les termes du Skill
Construit des design systems prêts pour la production sur Tailwind CSS v4 (2024+). Il détaille la configuration CSS-first, où @theme dans app.css remplace tailwind.config.ts, les tokens de couleur sémantiques écrits en OKLCH, les tokens de radius et d'animation dont les keyframes se trouvent dans @theme, le mode sombre basé sur les classes déclaré avec @custom-variant, et les styles de base appliqués dans @layer base.
Il expose également la hiérarchie des tokens, de la marque au sémantique jusqu'au composant, une architecture de composants passant par les styles de base, les variantes, les tailles, les états et les overrides, ainsi que des patterns de composants responsives et accessibles. Conçu pour les équipes qui créent une bibliothèque de composants, standardisent les patterns d'UI dans une base de code, ou migrent depuis Tailwind v3.
Fonctionnement
- 01Importer Tailwind dans le point d'entrée CSS
app.css commence par un seul @import plutôt que par les directives v3 @tailwind base/components/utilities.
- 02Déclarer l'ensemble de tokens sémantiques sous @theme
Background, foreground, primary, secondary, muted, accent, destructive, border, ring et card sont tous déclarés comme tokens de couleur en OKLCH.
- 03Ajouter des tokens d'animation avec leurs keyframes
--animate-fade-in et --animate-fade-out s'exécutent en 0.2s, --animate-slide-in et --animate-slide-out en 0.3s, chacun avec un bloc @keyframes correspondant déclaré dans @theme.
- 04Redéfinir les mêmes noms de tokens sous .dark
Le bloc dark réaffecte chaque token plutôt que d'introduire de nouveaux noms, en reprenant background, foreground, primary, secondary, muted, accent, destructive, border, ring, card et ring-offset.
- 05Définir les valeurs par défaut de la couche de base
@layer base applique border-border à chaque élément et donne au body la couleur de fond, la couleur de premier plan thématiques ainsi que l'antialiasing.
- 06Construire les composants dans l'ordre des couches
Les composants passent par les styles de base, les variantes, les tailles, les états et les overrides, dans cet ordre.