Pourquoi ce sujet est important
Tailwind accélère la mise en forme, mais une liste de classes libre dans chaque composant peut recréer les mêmes incohérences qu’un CSS non gouverné. Les conventions doivent exprimer tokens, variantes et responsabilités.
Commencer par les tokens
Définissez couleurs, espacements, rayons, typographie et ombres dans le thème ou les variables. Utilisez des noms sémantiques pour surface, texte et état plutôt que des couleurs arbitraires partout. Les tokens facilitent dark mode et évolution de marque.
Composants avant duplication
Lorsqu’un motif porte un sens ou un comportement, créez un composant React : Button, Alert, Field. Gardez les classes dans ce composant et exposez des props limitées. N’extrayez pas chaque combinaison ponctuelle dans une classe CSS abstraite.
Gérer les variantes
Utilisez une fonction ou bibliothèque de variantes pour taille, ton et état. Les valeurs autorisées doivent être explicites et typées. Fusionnez les classes avec prudence. Évitez de construire des noms dynamiques que l’outil ne peut pas détecter.
Ordonner et formater
Adoptez un formateur compatible pour produire un ordre stable. En revue, concentrez-vous sur design et accessibilité plutôt que l’ordre manuel. Limitez les valeurs arbitraires et documentez les exceptions.
Responsive et contenu
Concevez mobile d’abord, puis ajoutez les breakpoints nécessaires. Testez avec textes longs, zoom et langues. Ne masquez pas une information essentielle sur petit écran. Utilisez conteneurs et grilles cohérents.
États et accessibilité
Styles hover ne suffisent pas : prévoyez focus visible, disabled, erreur et contraste. Utilisez les éléments HTML adaptés avant les classes. Respectez reduced motion. Les lecteurs d’écran ne comprennent pas une couleur sans texte ou attribut.
Limiter le CSS global
Réservez le global au reset, aux variables, à la typographie de base et aux intégrations difficiles. Documentez les couches. Un composant tiers peut nécessiter du CSS ciblé, mais évitez les sélecteurs globaux fragiles.
Exemple concret
Une équipe définit Button avec variantes primary, secondary et danger, deux tailles et un focus commun. Les pages n’écrivent plus de combinaisons divergentes. Les tokens de couleur changent pour le dark mode sans modifier chaque composant.
Les erreurs fréquentes
- copier de longues classes légèrement différentes
- utiliser des couleurs brutes partout
- générer des classes par concaténation dynamique
- oublier focus et contraste
- accumuler des valeurs arbitraires
- transformer chaque style en @apply
Checklist
- [ ] Tokens sémantiques
- [ ] Composants pour motifs récurrents
- [ ] Variantes explicites
- [ ] Formatage automatique
- [ ] Valeurs arbitraires revues
- [ ] Responsive avec contenu réel
- [ ] Focus et contraste testés
FAQ
Faut-il utiliser @apply ?
Avec parcimonie pour certaines bases ou intégrations. Les composants React et variantes sont souvent plus clairs.
Comment réduire les classes longues ?
Extrayez un composant lorsqu’il représente un motif réutilisable, pas uniquement pour raccourcir le fichier.
Peut-on construire une classe avec une variable ?
Évitez les noms entièrement dynamiques ; mappez les valeurs possibles vers des classes complètes.
Tailwind garantit-il l’accessibilité ?
Non. Il fournit des utilitaires ; structure HTML, clavier, contraste et états restent à concevoir.
Centraliser les variantes avec un composant typé
~~~tsx import { cva, type VariantProps } from 'class-variance-authority'
const button = cva( 'inline-flex items-center rounded-md font-medium focus-visible:outline-2', { variants: { intent: { primary: 'bg-blue-700 text-white hover:bg-blue-800', danger: 'bg-red-700 text-white hover:bg-red-800', }, size: { sm: 'h-8 px-3', md: 'h-10 px-4' }, }, defaultVariants: { intent: 'primary', size: 'md' }, }, )
type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof button> ~~~
Évitez les classes fabriquées par fragments comme bg-[variable]-600 : le générateur peut ne pas les détecter. Utilisez une table explicite. Gardez les classes de mise en page près du composant et abstraisez uniquement les motifs répétés. Contrôlez contraste, focus et état désactivé dans chaque variante.