Clasificación Automática de Clases con Prettier

La gente ha estado hablando sobre la mejor manera de ordenar tus clases de utilidad en proyectos de Tailwind durante al menos cuatro años. Hoy estamos emocionados de anunciar que finalmente puedes dejar de preocuparte por eso con el lanzamiento de nuestro plugin oficial de Prettier para Tailwind CSS.

Este plugin escanea tus plantillas en busca de atributos de clase que contengan clases de Tailwind CSS, y luego ordena esas clases automáticamente siguiendo nuestro orden de clases recomendado.

<!-- Antes -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>
<!-- Después -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>

Funciona perfectamente con configuraciones personalizadas de Tailwind, y como es solo un plugin de Prettier, funciona en cualquier lugar donde Prettier funcione — incluyendo cada editor e IDE popular, y por supuesto en la línea de comandos.

Para empezar, instala prettier-plugin-tailwindcss como una dependencia de desarrollo:

npm install -D prettier prettier-plugin-tailwindcss

Luego agrega el plugin a tu archivo de configuración de Prettier:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Puedes también cargar el plugin usando la bandera --plugin con la CLI de Prettier, o usando la opción plugins con la API de Prettier.

Cómo se ordenan las clases

En esencia, todo lo que hace este plugin es organizar tus clases en el mismo orden en que Tailwind las ordena en tu CSS.

Esto significa que cualquier clase en la capa base se ordenará primero, seguida por las clases en la capa de componentes, y finalmente las clases en la capa de utilidades.

<!-- `container` es un componente así que va primero -->
<div class="container mx-auto px-6">
  <!-- ... -->
</div>

Las utilidades mismas se ordenan en el mismo orden en que las ordenamos en el CSS también, lo que significa que cualquier clase que sobrescriba a otras clases siempre aparece más tarde en la lista de clases:

<div class="pt-2 p-4">
<div class="p-4 pt-2">
    <!-- ... -->
  </div>
</div>

El orden real de las diferentes utilidades se basa vagamente en el modelo de caja, e intenta poner las clases de alto impacto que afectan el diseño al principio y las clases decorativas al final, al mismo tiempo que intenta mantener juntas las utilidades relacionadas:

<div class="text-gray-700 shadow-md p-3 border-gray-300 ml-4 h-24 flex border-2">
<div class="ml-4 flex h-24 border-2 border-gray-300 p-3 text-gray-700 shadow-md">
    <!-- ... -->
  </div>
</div>

Los modificadores como hover: y focus: se agrupan y se ordenan después de cualquier utilidad simple:

<div class="hover:opacity-75 opacity-50 hover:scale-150 scale-125">
<div class="scale-125 opacity-50 hover:scale-150 hover:opacity-75">
    <!-- ... -->
  </div>
</div>

Los modificadores Responsive como md: y lg: se agrupan al final en el mismo orden en que están configurados en tu tema — que es de menor a mayor por defecto:

<div class="lg:grid-cols-4 grid sm:grid-cols-3 grid-cols-2">
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">
    <!-- ... -->
  </div>
</div>

Cualquier clase personalizada que no provenga de plugins de Tailwind (como clases para apuntar a una biblioteca de terceros) siempre se ordena al principio, para que sea fácil ver cuándo un elemento las está usando:

<div class="p-3 shadow-xl select2-dropdown">
<div class="select2-dropdown p-3 shadow-xl">
    <!-- ... -->
  </div>
</div>

Personalización

Creemos que Prettier acierta cuando se trata de ser opinativo y ofrecer poco en términos de personalización — al final del día, el mayor beneficio de ordenar tus clases es que es simplemente una cosa menos sobre la que discutir con tu equipo.

Hemos intentado mucho encontrar un orden de clasificación que sea fácil de entender y comunique la información más importante lo más rápido posible.

El plugin respetará tu archivo tailwind.config.js y funcionará con cualquier plugin de Tailwind que hayas instalado, pero no hay forma de cambiar el orden de clasificación. Al igual que con Prettier, creemos que los beneficios del formateo automático superarán rápidamente cualquier preferencia estilística que tengas y que te acostumbrarás bastante rápido.

¿Listo para probarlo? Consulta la documentación completa en GitHub →