Estás metiendo clases de Tailwind CSS directamente en los elementos HTML y te encuentras con un lío de código poco escalable y difícil de mantener.

El truco

<!-- ANTES -->
<div class="bg-red-500 text-white p-4 my-2 rounded-lg shadow-lg">
  <!-- Más código -->
</div>

<!-- DESPUÉS -->
<div class="card">
  <!-- Más código -->
</div>
/* styles.css */
@layer components {
  .card {
    @apply bg-red-500 text-white p-4 my-2 rounded-lg shadow-lg;
  }
}

Usar clases de utilidad directamente en el HTML puede volverse poco manejable conforme el proyecto crece. La solución es crear componentes reutilizables usando @apply en tu archivo CSS. Esto centraliza el mantenimiento de estilos y permite ajustar las propiedades desde un solo lugar sin tener que editar múltiples archivos HTML. Además, se mejora la legibilidad del código al usar nombres de clases semánticamente significativos, lo cual facilita a los nuevos miembros del equipo entender rápidamente el diseño y estructura del proyecto.

Al final, lo que realmente importa es mantener tu CSS limpio y escalable, y Tailwind CSS te ofrece las herramientas para lograrlo sin sacrificar la flexibilidad.