Acortador de clases Tailwind

Cuándo usar el acortador

Tailwind tiende a producir className muy largos y con duplicados accidentales. Cuando refactorizás un componente o copiás un snippet de otro lugar, terminás con clases repetidas, espacios extras y orden caótico. Esta tool elimina duplicados, normaliza espacios y ordena alfabéticamente para que el código sea más fácil de revisar.

Qué hace exactamente

• Elimina duplicados: flex flex queda como flex.
• Normaliza espacios: múltiples espacios o saltos de línea quedan como un solo espacio.
• Ordena alfabéticamente: facilita lectura y comparación entre componentes.
• Cuenta clases: te muestra cuántas tenías y cuántas quedaron.

Cuándo no usarla

Si tu proyecto usa prettier-plugin-tailwindcss (recomendado), esa herramienta ordena las clases siguiendo el orden oficial de Tailwind: layout, flex, grid, spacing, sizing, typography, etc. Esa convención hace los componentes más predecibles. Para producción, usá el plugin oficial. Esta tool es para revisar y limpiar un className puntual a mano.

Por qué importa la limpieza

Un componente con un className de 30 clases en orden aleatorio es difícil de auditar. ¿Está aplicando padding? ¿Hay un hover state? ¿Aparece un breakpoint? Cuando las clases están ordenadas, el ojo encuentra patrones rápido. En equipos grandes, esta consistencia reduce errores y facilita PRs.

Patrones que ayudan

• Componentes en lugar de utilidades: si repetís el mismo combo 5 veces, extraelo a un componente.
• @apply con criterio: para combos muy comunes podés usar @apply en CSS, pero no abuses: pierde uno de los beneficios de Tailwind.
• clsx o cn helpers: condicionar clases con JS de forma legible.
• tailwind-variants o cva: para variantes complejas, una librería que te da estructura.

Errores comunes

• Aplicar la misma propiedad dos veces: p-2 p-4: gana la última en el HTML, pero si ambas tienen la misma especificidad CSS, gana la que está después en el archivo CSS, no en className.
• Mezclar Tailwind con CSS custom sin convención: hace difícil saber dónde está cada estilo.
• Hover y focus states perdidos: si tenés muchas clases con prefijo, agrupalas mentalmente.

Conclusión

Esta tool sirve para revisión rápida. Para producción, integrá prettier-plugin-tailwindcss en tu pipeline: corre en cada save y mantiene todo el codebase consistente sin esfuerzo. La diferencia entre un componente con 30 clases ordenadas y uno con 30 clases desordenadas es la diferencia entre un código que un colega entiende en 10 segundos y uno que lo frena 2 minutos.