Aller au contenu
TextArray1.41.0
Tout en local

Trieur de classes Tailwind

Triez les classes utilitaires dans les attributs class/className selon l'ordre recommandé par Tailwind.

Entrée
Sortie
Outils connexes
Formateur CSSOutils de développement
Calculatrice de spécificité CSSnouveauOutils de développement
Formateur HTMLOutils de développement
différence de clé i18nOutils de développement
Convertisseur TOML en JSONOutils de développement
SQL vers JSONOutils de développement
Trieur de classes Tailwind
Collez du HTML ou du JSX et cet outil réordonne les classes de chaque attribut class et className selon l'ordre recommandé par Tailwind CSS — le même ordre utilisé par prettier-plugin-tailwindcss : d'abord layout et positionnement, puis flexbox et grid, espacement, dimensionnement, typographie, arrière-plans, bordures et effets, avec des modificateurs responsive et d'état (hover:, sm:, dark:) placés après l'utilitaire de base qu'ils modifient. Un ordre cohérent réduit les diffs et facilite la révision des pull requests, puisque "flex p-4 text-white" et "text-white p-4 flex" donnent une sortie identique.
Choisissez si vous traitez tout le document collé — en scannant chaque attribut class et className qu'il trouve — ou si vous traitez l'entrée comme une simple liste de classes. Les classes non-Tailwind — vos propres classes de composants, ou des noms que l'outil ne reconnaît pas — restent groupées au début ou à la fin de chaque liste. Activez "Supprimer les classes en double" pour éliminer les répétitions exactes, et "Avertir sur les classes qui s'annulent" pour signaler des paires comme p-4 et p-2, ou block et hidden, qui s'annulent lorsqu'elles sont appliquées ensemble — le décompte apparaît dans le résumé en direct sous la sortie. "Grouper les variantes responsive" regroupe chaque classe sm:, md: et lg: à la fin plutôt que de les entrelacer avec leur équivalent sans préfixe.
Les classes à l'intérieur d'un template literal avec une expression JavaScript, comme className={`flex \${isActive ? 'bg-red-500' : 'bg-blue-500'} p-4`}, sont laissées inchangées par défaut car l'outil ne peut pas savoir ce qu'une variable rendra au moment de l'exécution — désactivez "Laisser les classes dynamiques inchangées" pour les trier quand même. Sortie en tant que code source modifié, prêt à coller dans votre éditeur, ou en tant que liste triée simple, une classe par ligne.
Tout fonctionne localement dans votre navigateur — le HTML, JSX ou la liste de classes que vous collez n'est jamais téléchargé nulle part. Quand vous avez terminé, copiez le résultat, téléchargez-le en tant que fichier .txt, ou renvoyez la sortie à l'entrée pour exécuter un autre outil dessus.
FAQ
Dans quel ordre trie-t-il les classes?
Le même ordre de catégories recommandé par le plugin officiel de Tailwind: layout, flexbox/grid, espacement, dimensionnement, typographie, arrière-plans, bordures, effets, filtres, transitions, transformations et interactivité, avec des modificateurs comme hover: et sm: placés après la classe de base à laquelle ils s'appliquent.
Fonctionne-t-il avec JSX et les template literals, pas seulement avec le HTML simple?
Oui. Il reconnaît class="…", className="…" et les template literals className={`…`}. Un className défini à partir d'une variable ou d'un appel de fonction comme clsx(…) ne peut pas être analysé de manière sûre et est laissé tel quel.
Qu'est-ce qui compte comme une classe "personnalisée"?
Toute classe que l'outil ne reconnaît pas comme une utilité Tailwind — vos propres classes de composants, ou des classes d'un plugin que cet outil ne couvre pas. Les classes personnalisées conservent leur ordre relatif et sont placées au début ou à la fin de la liste, selon l'option que vous choisissez.
Comment détecte-t-il les classes en conflit?
Il signale les cas courants : deux classes qui définissent la même propriété basée sur l'échelle (comme p-4 et p-2), et les mots-clés mutuellement exclusifs (comme block et hidden, ou text-left et text-right) appliqués avec les mêmes modificateurs. Ce n'est pas un linter exhaustif, mais il détecte les classes qui s'introduisent le plus souvent par erreur.
Mon code est-il téléchargé quelque part?
Non. Le tri des classes fonctionne entièrement dans votre navigateur — le HTML, JSX ou la liste de classes que vous collez ne quittent jamais votre appareil.