Pourquoi nettoyer une liste de classes Tailwind ?
Après quelques itérations, votre `className` ressemble à ça : `"flex p-4 hover:bg-blue-500 px-4 text-sm hover:bg-blue-600 md:p-6 md:p-8 font-medium bg-white"`. Trois problèmes se cachent là-dedans : `p-4` est partiellement surchargé par `px-4` (redondant), deux `hover:bg-blue-...` (conflit de hover), `md:p-6` surchargé par `md:p-8` (conflit de breakpoint). Et tout est en désordre.
L'outil détecte les conflits (« p-4 surchargé par p-2 », « md:p-4 vs md:p-8 ») et les redondances (`p-4` + `px-4` est du gaspillage). Puis il trie les survivants dans l'ordre conventionnel : layout → positioning → sizing → spacing → typography → background → border → effects → states.
Le résultat est lisible et sans bug. Vous voyez ce qui a été retiré, combien de groupes ont été triés, et un récap de stats.
Mode d'emploi
- Collez une longue chaîne de className (depuis un composant React/Vue/HTML) dans le panneau de gauche.
- À droite, vous obtenez la version nettoyée plus une liste des soucis détectés.
- Chaque souci a une description (« p-4 surchargé par p-2 ») : facile de comprendre pourquoi la classe a disparu.
- Activez « Sort only » pour le mode safe : l'outil ne retire rien, il ne fait que réordonner (utile si vous ne faites pas confiance à la détection de conflits).
- Cliquez sur « Copier » et collez le résultat dans votre JSX.
Quand ça aide
Situations courantes :
- Composants de longue durée. Une carte produit après 10 itérations de design a 30 classes, dont la plupart sont inutiles. Après nettoyage, vous en gardez 12.
- Nettoyage des classes générées par le designer. Un plugin Figma-to-Tailwind sort des chaînes gonflées : passez-les dans l'outil.
- Revue de code. Le commentaire « les classes sont en désordre » : passez le fichier dans l'outil, vous obtenez un style cohérent. Très bien en duo avec prettier-plugin-tailwindcss, mais ici vous obtenez aussi la détection de conflits.
- Migration vers une nouvelle version de Tailwind. La v4 change le comportement de certaines classes : facile de voir ce qui survit.
- Onboarding d'équipe. Un junior écrit `p-4 px-4 py-4` en pensant que c'est « extra safe » : l'outil explique que `p-4` signifie déjà `px-4 py-4`.
- Nettoyage de code généré par IA. L'IA adore sortir des chaînes className alourdies. Filtrez-les.
- En complément du générateur de palette : pour les choix de couleurs, voir le générateur de palette Tailwind.
Pour les calculs de spécificité, voir le calculateur de spécificité. Pour les dégradés CSS, voir le générateur de dégradés.