Pourquoi trier les classes CSS Tailwind ?
L’ordre des classes CSS Tailwind affecte la lisibilité et la maintenabilité. Le plugin officiel Prettier pour Tailwind recommande un ordre spécifique : mise en page, flexbox/grille, espacement, dimensionnement, typographie, arrière-plans, bordures, effets, transitions, transformations et interactivité. Un ordre cohérent facilite la révision du code et réduit les différences inutiles. Cet outil trie vos cours selon l'ordre recommandé.
Comment trier les classes Tailwind
- 1Collez votre chaîne de classe CSS Tailwind dans la zone de saisie.
- 2L'outil trie instantanément les classes selon l'ordre officiel recommandé.
- 3Activez Remove duplicates pour nettoyer les classes répétées.
- 4Cliquez sur Copier pour copier la chaîne de classe triée.
Cas d'utilisation courants
Nettoyage du code
Organisez des chaînes de classe désordonnées lors de la refactorisation des composants ou de l'examen des demandes d'extraction.
Cohérence des styles
Assurez un ordre de classe cohérent au sein de votre équipe lorsque le plugin Prettier n’est pas configuré.
Formatage rapide
Triez et dédupliquez les classes copiées à partir des DevTools du navigateur ou des outils de conception.
Questions fréquentes
Cela suit-il l'ordre de tri officiel de Tailwind ?
Oui. L'ordre de tri suit les conventions du plugin Tailwind CSS Prettier : mise en page, flexbox/grille, espacement, dimensionnement, typographie, arrière-plans, bordures, effets, transitions, transformations, interactivité.
Comment les préfixes réactifs sont-ils gérés ?
Les classes avec des préfixes réactifs (sm :, md :, lg :, xl :) sont triées après les classes de base, dans l'ordre des points d'arrêt. Les variantes d'état (hover :, focus :) sont regroupées de la même manière.
Et les cours personnalisés ?
Les classes personnalisées qui ne sont pas des utilitaires Tailwind standard sont placées à la fin de la sortie triée.