Modèles Tailwind CSS (v4 - 2025)
CSS utilitaire moderne avec configuration native en CSS.
1. Architecture Tailwind v4
Quoi de neuf par rapport à v3
| v3 (Hérité) | v4 (Actuel) |
|---|
tailwind.config.js | Directive @theme en CSS |
| Plugin PostCSS | Moteur Oxide (10x plus rapide) |
| Mode JIT | Natif, toujours actif |
| Système de plugins | Fonctionnalités natives CSS |
Directive @apply | Fonctionne encore, déconseillée |
Concepts clés de v4
| Concept | Description |
|---|
| CSS-first | Configuration en CSS, pas en JavaScript |
| Moteur Oxide | Compilateur basé sur Rust, beaucoup plus rapide |
| Imbrication native | Imbrication CSS sans PostCSS |
| Variables CSS | Tous les tokens exposés comme variables --* |
2. Configuration basée sur CSS
Définition du thème
@theme {
/* Couleurs - utilisez des noms sémantiques */
--color-primary: oklch(0.7 0.15 250);
--color-surface: oklch(0.98 0 0);
--color-surface-dark: oklch(0.15 0 0);
/* Échelle d'espacement */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
/* Typographie */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
Quand étendre vs remplacer
| Action | Quand l'utiliser |
|---|
| Étendre | Ajouter de nouvelles valeurs aux valeurs par défaut |
| Remplacer | Remplacer complètement l'échelle par défaut |
| Tokens sémantiques | Nommage spécifique au projet (primary, surface) |
3. Container Queries (natives v4)
Point d'arrêt vs Conteneur
| Type | Répond à |
|---|
Point d'arrêt (md:) | Largeur de la fenêtre visible |
Conteneur (@container) | Largeur de l'élément parent |
Utilisation des Container Queries
| Motif | Classes |
|---|
| Définir un conteneur | @container sur le parent |
| Point d'arrêt de conteneur | @sm:, @md:, @lg: sur les enfants |
| Conteneurs nommés | @container/card pour la spécificité |
Quand les utiliser
| Scénario | Utilisation |
|---|
| Mises en page au niveau de la page | Points d'arrêt de fenêtre |
| Responsive au niveau du composant | Container queries |
| Composants réutilisables | Container queries (indépendants du contexte) |
4. Conception Responsive
Système de points d'arrêt
| Préfixe | Largeur minimale | Cible |
|---|
| (aucun) | 0px | Base mobile-first |
sm: | 640px | Grand téléphone / petite tablette |
md: | 768px | Tablette |
lg: | 1024px | Ordinateur portable |
xl: | 1280px | Bureau |
2xl: | 1536px | Grand bureau |
Principe mobile-first
- Écrire d'abord les styles mobiles (sans préfixe)
- Ajouter les surcharges pour les écrans plus grands avec des préfixes
- Exemple :
w-full md:w-1/2 lg:w-1/3
5. Mode Sombre
Stratégies de configuration
| Méthode | Comportement | Quand l'utiliser |
|---|
class | La classe .dark bascule | Sélecteur de thème manuel |
media | Suit la préférence système | Pas de contrôle utilisateur |
selector | Sélecteur personnalisé (v4) | Thématisation complexe |
Motif du mode sombre
| Élément | Clair | Sombre |
|---|
| Arrière-plan | bg-white | dark:bg-zinc-900 |
| Texte | text-zinc-900 | dark:text-zinc-100 |
| Bordures | border-zinc-200 | dark:border-zinc-700 |
6. Modèles de mise en page modernes
Modèles Flexbox
| Motif | Classes |
|---|
| Centrer (les deux axes) | flex items-center justify-center |
| Pile verticale | flex flex-col gap-4 |
| Ligne horizontale | flex gap-4 |
| Espacement entre | flex justify-between items-center |
| Grille avec retour à la ligne | flex flex-wrap gap-4 |
Modèles Grid
| Motif | Classes |
|---|
| Auto-ajustement responsive | grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] |
| Asymétrique (Bento) | grid grid-cols-3 grid-rows-2 avec col-span-* / row-span-* |
| Mise en page avec barre latérale | grid grid-cols-[auto_1fr] |
Remarque : Privilégiez les mises en page asymétriques/Bento plutôt que les grilles symétriques à 3 colonnes.
7. Système de couleurs moderne
OKLCH vs RVB/TSL
| Format | Avantage |
|---|
| OKLCH | Uniforme perceptuellement, meilleur pour le design |
| TSL | Teinte/saturation intuitives |
| RVB | Compatibilité héritée |
Architecture des tokens de couleur
| Couche | Exemple | Objectif |
|---|
| Primitive | --blue-500 | Valeurs de couleur brutes |
| Sémantique | --color-primary | Nommage basé sur l'usage |
| Composant | --button-bg | Spécifique au composant |
8. Système typographique
Modèle de pile de polices
| Type | Recommandé |
|---|
| Sans | 'Inter', 'SF Pro', system-ui, sans-serif |
| Mono | 'JetBrains Mono', 'Fira Code', monospace |
| Affichage | 'Outfit', 'Poppins', sans-serif |
Échelle typographique
| Classe | Taille | Utilisation |
|---|
text-xs | 0,75rem | Étiquettes, légendes |
text-sm | 0,875rem | Texte secondaire |
text-base | 1rem | Corps de texte |
text-lg | 1,125rem | Texte d'introduction |
text-xl+ | 1,25rem+ | Titres |
9. Animations & Transitions
Animations intégrées
| Classe | Effet |
|---|
animate-spin | Rotation continue |
animate-ping | Impulsion d'attention |
animate-pulse | Impulsion d'opacité subtile |
animate-bounce | Effet de rebond |
Modèles de transition
| Motif | Classes |
|---|
| Toutes les propriétés | transition-all duration-200 |
| Spécifique | transition-colors duration-150 |
| Avec courbe d'accélération | ease-out ou ease-in-out |
| Effet au survol | hover:scale-105 transition-transform |
10. Extraction de composants
Quand extraire
| Signal | Action |
|---|
| Même combinaison de classes 3 fois ou plus | Extraire le composant |
| Variantes d'état complexes | Extraire le composant |
| Élément du système de design | Extraire + documenter |
Méthodes d'extraction
| Méthode | Quand l'utiliser |
|---|
| Composant React/Vue | Dynamique, nécessite JS |
| @apply en CSS | Statique, ne nécessite pas JS |
| Tokens de design | Valeurs réutilisables |
11. Anti-patrons
| À ne pas faire | À faire |
|---|
| Valeurs arbitraires partout | Utiliser l'échelle du système de design |
!important | Corriger la spécificité correctement |
Attribut style= en ligne | Utiliser les utilitaires |
| Dupliquer de longues listes de classes | Extraire le composant |
| Mélanger configuration v3 avec v4 | Migrer complètement vers CSS-first |
Utiliser @apply massivement | Préférer les composants |
12. Principes de performance
| Principe | Implémentation |
|---|
| Purge des inutilisés | Automatique dans v4 |
| Éviter le dynamisme | Pas de classes de type chaîne de template |
| Utiliser Oxide | Par défaut dans v4, 10x plus rapide |
| Mettre en cache les builds | Mise en cache CI/CD |
Rappel : Tailwind v4 est CSS-first. Adoptez les variables CSS, les container queries et les fonctionnalités natives. Le fichier de configuration est désormais optionnel.