¿Por qué Ordenar clases de Tailwind CSS?
El orden de las clases de Tailwind CSS afecta a la legibilidad y el mantenimiento. El complemento oficial de Prettier para Tailwind recomienda una secuencia específica: layout, flexbox/grid, espaciado, dimensionamiento, tipografía, fondos, bordes, efectos, transiciones, transformaciones e interactividad. Una ordenación consistente facilita revisiones de código y reduce diffs sin significado. Esta herramienta organiza las clases siguiendo ese orden recomendado.
Cómo ordenar clases de Tailwind
- 1Cole a string de clases de TailwindCSS en el área de entrada.
- 2La herramienta ordenará las clases instantáneamente conforme al orden oficial recomendado.
- 3Activa Remove duplicates para eliminar clases repetidas.
- 4Haga clic en Copiar para copiar la cadena de clases ordenada.
Common Ordenador de clases CSS de Tailwind — organiza utility classes use cases
Developer debugging
Use Ordenador de clases CSS de Tailwind — organiza utility classes to quickly inspect generated output, API payloads, configuration values, or encoded data while building and debugging software.
Review before reuse
Validate or transform tailwind, css, class, sort, order, utility before adding the result to a project, document, form, message, or shared file.
Privacy-first browser processing
Run common tailwind, css, class, sort, order, utility tasks locally in the browser without sending sensitive development data to a backend service.
Preguntas frecuentes
La herramienta sigue el orden oficial del Tailwind?
Sí. La ordenación sigue los convenios del complemento de Prettier para Tailwind CSS: layout, flexbox/grid, espaciado, dimensionamiento, tipografía, fondos, bordes, efectos, transiciones, transformaciones e interactividad.
¿Cómo se tratan los prefijos de respuesta?
Clases con prefijos de respuesta (sm:, md:, lg:, xl:) se ordenan después de las clases base, siguiendo el orden de los breakpoints. Variantes de estado (hover:, focus:) se agrupan de manera similar.
¿Qué pasa con clases personalizadas?
Clases personalizadas que no corresponden a utilidades estándar de Tailwind se colocan al final de la salida ordenada.
¿Las clases insertadas se envían a un servidor?
No. La ordenación y la eliminación de duplicados se realizan localmente en el navegador, sin enviar el contenido a un backend.