Tailwind CSS: Escala tu CSS sin miedo a los estilos inline

Tailwind CSS puede sentirse como estilos inline y parecer desordenado, pero hay maneras de escalarlo sin perder el control.

El truco

<!-- Antes (mal): -->
<div class="text-lg text-gray-800 font-semibold px-4 py-2 bg-white border border-gray-300 rounded-md shadow-md w-full">
  ¡Hola Mundo!
</div>

<!-- Después (bien): -->
<div class="card">
  ¡Hola Mundo!
</div>

/* styles.css */
@layer components {
  .card {
    @apply text-lg text-gray-800 font-semibold px-4 py-2 bg-white border border-gray-300 rounded-md shadow-md w-full;
  }
}

Tailwind CSS permite crear clases personalizadas utilizando @apply dentro de un archivo CSS. Esto convierte las clases utilitarias en componentes reutilizables, limpiando tu HTML y mejorando la mantenibilidad del código. Este enfoque ahorra tiempo y reduce errores cuando necesitas estilos consistentes en múltiples lugares.

Con Tailwind CSS, puedes mantener limpio tu HTML mientras disfrutas de la flexibilidad de los estilos utilitarios.