Tu HTML no tiene que ser un campo minado: consejos para dominar Tailwind sin morir en el intento

Introducción

La primera vez que ves un bloque de HTML lleno de clases de Tailwind, es normal sentir un escalofrío. class="flex items-center justify-between p-4 bg-white rounded-lg shadow-md". Parece que alguien escribió un manual de CSS dentro de tu HTML. Muchos se rinden aquí, pero te prometo que la clave para dominar Tailwind no es cuántas clases usas, sino cómo las organizas.

Tailwind es increíblemente potente. Te permite construir interfaces complejas sin escribir una sola línea de CSS en un archivo aparte. Hoy te enseño a usar las clases de utilidad para escribir código legible, mantenible y, sobre todo, ¡que no parezca un desastre!

El primer truco: extraer componentes

Este es el pilar fundamental. Si un bloque de clases de utilidad se repite, no lo copies y pegues. Conviértelo en un componente de Vue reutilizable.

Antes (código caótico):

<div class="flex items-center p-4 bg-white rounded-lg shadow-md">
    <img src="..." class="w-12 h-12 rounded-full mr-4">
    <div>
        <h3 class="font-bold text-lg">User</h3>
        <p class="text-sm text-gray-500">@example_user</p>
    </div>
</div>
  

Después (refactorizado en un componente):

<template>
  <div class="flex items-center p-4 bg-white rounded-lg shadow-md">
    <img :src="user.avatar" class="w-12 h-12 rounded-full mr-4">
    <div>
      <h3 class="font-bold text-lg">{{ user.name }}</h3>
      <p class="text-sm text-gray-500">{{ user.handle }}</p>
    </div>
  </div>
</template>
  

Ahora tu HTML principal queda así de limpio:

<UserProfileCard :user="currentUser" />
  

El segundo truco: la directiva @apply

Cuando un grupo de clases se usa muy a menudo y no quieres crear un componente (o no tiene sentido), puedes usar la directiva @apply de Tailwind en tus archivos CSS.

.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700 transition-colors;
}
  

Y tu HTML queda mucho más limpio:

<button class="btn-primary">Haz clic</button>
  

Nota: usa @apply con moderación. Si abusas de él, puedes perder la flexibilidad que hace a Tailwind tan potente.

El tercer truco: convenciones y orden mental

Aunque no hay una regla estricta, ordenar tus clases te ayuda a encontrarlas rápido. Puedes adoptar un orden lógico, por ejemplo:

1. Disposición: flex, grid, block
2. Tamaño: w-12, h-4, max-w-md
3. Espaciado: p-4, m-2, space-x-2
4. Fondos: bg-white, bg-gray-100
5. Tipografía: text-xl, font-bold, text-center
6. Bordes: border, rounded-lg
7. Efectos: shadow-md, opacity-50
8. Estados: hover:, focus:, dark:

Conclusión

Tailwind no es caótico, es un lienzo en blanco. Con un poco de disciplina y las técnicas adecuadas, puedes crear interfaces robustas sin sacrificar la legibilidad del código.

La próxima vez que veas un bloque de clases, piensa: «¿Puedo extraer esto en un componente?» Te garantizo que este simple cambio te convertirá en un maestro de Tailwind.