Ordenador de clases Tailwind
Ordena las clases utility en atributos class/className según el orden recomendado por Tailwind.
Ordenador de clases Tailwind
Pega HTML o JSX y esta herramienta reordena las clases dentro de cada atributo class y className para que coincidan con el orden recomendado por Tailwind CSS — el mismo orden de categorías usado por el plugin oficial prettier-plugin-tailwindcss: primero layout y posicionamiento, luego flexbox y grid, espaciado, tamaño, tipografía, fondos, bordes y efectos, con modificadores responsive y de estado (hover:, sm:, dark:) colocados después de la utilidad base que modifican. Un orden consistente reduce los diffs y facilita la revisión de pull requests, ya que dos desarrolladores que escriben "flex p-4 text-white" y "text-white p-4 flex" terminan con salida idéntica.
Elige si procesar todo el documento pegado — escaneando cada atributo class y className que encuentre — o tratar la entrada como una lista simple de clases. Las clases no-Tailwind (tus propias clases de componentes, nombres de utilidad de otros frameworks) se mantienen juntas al inicio o final de cada lista en lugar de dispersarse. Activa "Eliminar clases duplicadas" para descartar repeticiones exactas, y "Avisar sobre clases que se anulan" para detectar pares como p-4 y p-2, o block y hidden, que se anulan al aplicarse juntos — el conteo aparece en el resumen en vivo debajo del resultado. "Agrupar variantes responsive" agrupa cada clase sm:, md: y lg: al final en lugar de intercalarlas junto a su equivalente sin prefijo, lo que algunos equipos prefieren para escanear de un vistazo.
Las clases dentro de un template literal con una expresión JavaScript, como className={`flex \${isActive ? 'bg-red-500' : 'bg-blue-500'} p-4`}, se dejan sin cambios por defecto ya que la herramienta no puede saber qué renderizará una variable en tiempo de ejecución — desactiva "Dejar clases dinámicas sin cambios" para ordenarlas de todas formas. Resultado como código fuente modificado, listo para pegar en tu editor, o como lista ordenada simple, una clase por línea.
Todo funciona localmente en tu navegador — el HTML, JSX o lista de clases que pegas nunca se carga en ningún lado. Cuando termines, copia el resultado, descárgalo como archivo .txt, o envía el resultado nuevamente a la entrada para usar otra herramienta.