¿Por qué limpiar una lista de clases Tailwind?
Tras unas cuantas iteraciones tu `className` se ve así: `"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"`. Tres problemas se esconden ahí: `p-4` está parcialmente sobreescrito por `px-4` (redundante), dos `hover:bg-blue-...` (conflicto en hover), `md:p-6` sobreescrito por `md:p-8` (conflicto de breakpoint). Y todo está mezclado.
La herramienta detecta conflictos ("p-4 sobreescrito por p-2", "md:p-4 vs md:p-8") y redundancias (`p-4` + `px-4` es desperdicio). Luego ordena los supervivientes en el orden convencional: layout → posicionamiento → sizing → spacing → tipografía → background → border → effects → states.
El resultado es legible y sin bugs. Ves qué se quitó, cuántos grupos se ordenaron y un resumen de estadísticas.
Cómo usar
- Pega un string largo de className (de un componente React/Vue/HTML) en el panel izquierdo.
- A la derecha obtienes la versión limpia más una lista de issues detectados.
- Cada issue tiene una descripción ("p-4 sobreescrito por p-2"): fácil entender por qué la clase desapareció.
- Activa "Solo ordenar" para modo seguro: la herramienta no quita nada, solo reordena (útil si no confías en la detección de conflictos).
- Pulsa "Copiar" y pega el resultado de vuelta en tu JSX.
Cuándo ayuda
Situaciones comunes:
- Componentes de larga vida. Una product card tras 10 iteraciones de diseño tiene 30 clases, la mayoría inútiles. Tras limpieza te quedas con 12.
- Limpiar clases generadas por diseñador. Un plugin Figma-a-Tailwind suelta strings hinchados: pásalos por aquí.
- Revisión de código. El comentario "las clases están desordenadas": ejecuta el fichero a través de la herramienta, obtén styling consistente. Empareja bien con prettier-plugin-tailwindcss, pero aquí también obtienes detección de conflictos.
- Migrar a una nueva versión de Tailwind. v4 cambia cómo se comportan algunas clases: es fácil ver qué sobrevive.
- Onboarding de equipo. Un junior escribe `p-4 px-4 py-4` pensando que es "extra seguro": la herramienta explica que `p-4` ya significa `px-4 py-4`.
- Limpiar código generado por IA. La IA adora soltar strings de className hinchados. Fíltralos.
- De la mano con el generador de paleta: para elecciones de color mira el generador de paleta Tailwind.
Para cálculos de especificidad mira la calculadora de especificidad. Para gradientes CSS mira el generador de gradientes.