Resulta ser que a los developers web les interesa mucho saber cómo ordenar las clases de Tailwind en sus proyectos web.

👀 Te dejo el link al issue original en Github

El equipo de Tailwind labs, que por cierto es uno equipo muy activo, pues están aprovechando al máximo el hype que tiene su herramienta en estos días; han publicado su propio plugin para Prettier.

¡Ya no será necesario discutir sobre el orden de las clases! 🥳🫱🏼‍🫲🏾

Y en este post te voy a enseñar cómo instalarlo y configurarlo en un dos por tres, es más, te voy a decir cuál es el criterio que su algoritmo usa para ordenar las clases.

Por cierto, si aún no sabes qué es Prettier, puedes aprenderlo en mi otro video.

!https://i.imgur.com/1x7z5rQ.png

Cuando este plugin lee tu código en búsqueda de clases de Tailwind, las ordena automáticamente siguiendo las recomendaciones oficiales.

<!-- Before -->
<button class="py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>

<!-- After -->
<button class="bg-sky-700 py-2 hover:bg-sky-800 sm:py-3">...</button>

En este ejemplo podemos ver que el orden ha cambiado según la jerarquía de las utilidades.

Pero, ¿no te curiosidad saber cuál es el criterio que usa el plugin para ordenarlas?

¿Cómo son ordenadas las clases?

Todo se ordena de la misma manera en que Tailwind ordena sus utilidades y tus clases en el archivo CSS resultante que genera.

Tailwind ordena primero el base layer para luego tomar las clases del components layer y finalmente el utilities layer.

!https://i.imgur.com/M5wunkh.png

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

Sí, esas tres lineas al principio de tu archivo de origen que usas con Tailwind.

Este orden asegura que cualquier clase que sobre escriba otras clases, siempre aparezca al final en la lista.

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

El algoritmo que Tailwind utiliza para ordenar sus utilidades y diferenciar las jerarquías entre ellas, toma decisiones a partir del layout, priorizando a las clases que tienen un alto impacto en el layout, colocándolas **al principio, mientras que a las que son solo decorativas, las coloca al final, al mismo tiempo que mantiene juntas a las utilidades relacionadas.

👀 El orden entre diferentes utilidades está basado en el modelo de caja, superficialmente.

<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>

Te dejo el enlace al documento original para que puedas saber más sobre los detalles del ordenamiento.

Podemos concluir que la forma de ordenar las utilidades en la llave class es la misma que Tailwind utiliza en el archivo CSS.

¿En qué framework ya está disponible este plugin ?

Al ser un plugin de Prettier se vuelve muy compatible y funciona en muchos entornos diferentes sin problema alguno, una de las grandes ventajas al diseñar la arquitectura de tu herramienta como un modelo de plugins, que es algo que a mi últimamente me interesa mucho.

Los frameworks que ya incluyen este plugin de ordenamiento previamente activado son:

• Remix
• Next y también lo encontrarás en
• Vite

Vamos a instalarlo y probarlo

Vamos a instalarlo desde la linea de comandos.

npm install -D prettier prettier-plugin-tailwindcss

La flag -D aquí, significa que queremos instalarla solo para desarrollo. Instalamos tanto Prettier como el plugin.

Prettier utiliza una convención llamada autoloading en su arquitectura, lo que hace muy simple el uso de plugins, pues basta con instalarlos para que comiencen a funcionar. Pero hay que nombrarlos en la lista de plugins en el archivo de configuración de prettier de tu proyecto.

// ./prettier.config.js

module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
};

👀 También asegúrate de tener activado el formatOnSave en la configuración de VSCode

Con esto todo está listo para que tus clases se ordenen adecuadamente al guardar.

Ahora puedes administrar tus clases de Tailwind como todo un profesional

No olvides suscribirte para que no te pierdas mi nuevo curso de Tailwind CSS que ahora mismo está en construcción, recuerda que habrá un descuento limitado al estreno.

Abrazo. Bliss.

Enlaces relacionados

¿Qué es Prettier?

https://youtu.be/lfXm7MIqk7k

Issue en Github

https://github.com/tailwindlabs/discuss/issues/97

Documento original

https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted

Autoloading

https://prettier.io/docs/en/plugins.html