Blaise1030/astro-marketing

Système de Design Tailwind (v4)

Construisez des systèmes de design prêts pour la production avec Tailwind CSS v4, incluant une configuration CSS-first, des jetons de design, des variantes de composants, des motifs responsifs et l'accessibilité.

Note : Cette compétence cible Tailwind CSS v4 (2024+). Pour les projets v3, consultez le guide de mise à niveau.

Quand utiliser cette compétence

• Création d'une bibliothèque de composants avec Tailwind v4
• Implémentation de jetons de design et thématisation avec configuration CSS-first
• Construction de composants responsifs et accessibles
• Standardisation des motifs d'interface sur une base de code
• Migration de Tailwind v3 vers v4
• Mise en place du mode sombre avec les fonctionnalités CSS natives

Principaux changements v4

Pattern v3	Pattern v4
tailwind.config.ts	@theme en CSS
@tailwind base/components/utilities	@import "tailwindcss"
darkMode: "class"	@custom-variant dark (&:where(.dark, .dark *))
theme.extend.colors	@theme { --color-*: value }
require("tailwindcss-animate")	CSS @keyframes dans @theme + @starting-style pour les animations d'entrée

Démarrage rapide

/* app.css - Configuration CSS-first Tailwind v4 */
@import "tailwindcss";

/* Définissez votre thème avec @theme */
@theme {
  /* Jetons de couleur sémantiques utilisant OKLCH pour une meilleure perception des couleurs */
  --color-background: oklch(100% 0 0);
  --color-foreground: oklch(14.5% 0.025 264);

  --color-primary: oklch(14.5% 0.025 264);
  --color-primary-foreground: oklch(98% 0.01 264);

  --color-secondary: oklch(96% 0.01 264);
  --color-secondary-foreground: oklch(14.5% 0.025 264);

  --color-muted: oklch(96% 0.01 264);
  --color-muted-foreground: oklch(46% 0.02 264);

  --color-accent: oklch(96% 0.01 264);
  --color-accent-foreground: oklch(14.5% 0.025 264);

  --color-destructive: oklch(53% 0.22 27);
  --color-destructive-foreground: oklch(98% 0.01 264);

  --color-border: oklch(91% 0.01 264);
  --color-ring: oklch(14.5% 0.025 264);

  --color-card: oklch(100% 0 0);
  --color-card-foreground: oklch(14.5% 0.025 264);

  /* Décalage de l'anneau pour les états de focus */
  --color-ring-offset: oklch(100% 0 0);

  /* Jetons de rayon */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;

  /* Jetons d'animation - les keyframes dans @theme sont générés lorsqu'ils sont référencés par les variables --animate-* */
  --animate-fade-in: fade-in 0.2s ease-out;
  --animate-fade-out: fade-out 0.2s ease-in;
  --animate-slide-in: slide-in 0.3s ease-out;
  --animate-slide-out: slide-out 0.3s ease-in;

  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes slide-in {
    from {
      transform: translateY(-0.5rem);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slide-out {
    from {
      transform: translateY(0);
      opacity: 1;
    }
    to {
      transform: translateY(-0.5rem);
      opacity: 0;
    }
  }
}

/* Variante mode sombre - utilisez @custom-variant pour le mode sombre basé sur les classes */
@custom-variant dark (&:where(.dark, .dark *));

/* Surcharges du thème pour le mode sombre */
.dark {
  --color-background: oklch(14.5% 0.025 264);
  --color-foreground: oklch(98% 0.01 264);

  --color-primary: oklch(98% 0.01 264);
  --color-primary-foreground: oklch(14.5% 0.025 264);

  --color-secondary: oklch(22% 0.02 264);
  --color-secondary-foreground: oklch(98% 0.01 264);

  --color-muted: oklch(22% 0.02 264);
  --color-muted-foreground: oklch(65% 0.02 264);

  --color-accent: oklch(22% 0.02 264);
  --color-accent-foreground: oklch(98% 0.01 264);

  --color-destructive: oklch(42% 0.15 27);
  --color-destructive-foreground: oklch(98% 0.01 264);

  --color-border: oklch(22% 0.02 264);
  --color-ring: oklch(83% 0.02 264);

  --color-card: oklch(14.5% 0.025 264);
  --color-card-foreground: oklch(98% 0.01 264);

  --color-ring-offset: oklch(14.5% 0.025 264);
}

/* Styles de base */
@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground antialiased;
  }
}

Concepts fondamentaux

1. Hiérarchie des jetons de design

Jetons de marque (abstraits)
    └── Jetons sémantiques (usage)
        └── Jetons de composants (spécifiques)

Exemple :
    oklch(45% 0.2 260) → --color-primary → bg-primary

2. Architecture des composants

Styles de base → Variantes → Tailles → États → Surcharges

Patterns détaillés et exemples concrets

La documentation détaillée des patterns se trouve dans references/details.md. Lisez ce fichier lorsque le niveau de navigation ci-dessus est insuffisant.