Usar un desorden de clases en Tailwind CSS puede hacer que tu código sea difícil de leer y mantener.

El truco

Ordena tus clases Tailwind CSS de forma automática para mejorar la legibilidad y el mantenimiento.

ANTES:

<div class="bg-blue-500 p-4 rounded mt-2 text-white font-bold">
  Botón
</div>

DESPUÉS:

<div class="mt-2 p-4 bg-blue-500 text-white font-bold rounded">
  Botón
</div>

Para lograrlo, instala Prettier si no lo tienes:

npm install --save-dev prettier prettier-plugin-tailwindcss

Configura Prettier en tu proyecto:

// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

La clave está en el plugin prettier-plugin-tailwindcss, que se encarga de ordenar las clases automáticamente cada vez que guardas el archivo. Esto no solo mejora la legibilidad, sino que también ayuda a mantener un estándar uniforme en todo el proyecto sin esfuerzo adicional.

No se trata de escribir menos, sino de escribir mejor de manera automática.