Quieres crear gráficos interactivos sin recurrir a SVG, pero tu CSS crece sin control y es un lío.

El truco

<!-- ANTES (mal): CSS poco claro y repetitivo -->
<div class="graph-bar bg-blue-500 w-16 h-24"></div>
<div class="graph-bar bg-green-500 w-16 h-36"></div>
<div class="graph-bar bg-red-500 w-16 h-12"></div>

<style>
  .graph-bar {
    transition: height 0.3s ease;
  }
  .graph-bar:hover {
    height: 48px;
  }
</style>

<!-- DESPUÉS (bien): Tailwind CSS limpio y eficiente -->
<div class="group graph-bar w-16 h-24 bg-blue-500 hover:h-48 transition-all duration-300"></div>
<div class="group graph-bar w-16 h-36 bg-green-500 hover:h-48 transition-all duration-300"></div>
<div class="group graph-bar w-16 h-12 bg-red-500 hover:h-48 transition-all duration-300"></div>

Utiliza la clase group para agrupar estilos y la clase hover:h-48 para cambiar la altura al pasar el ratón. La clase transition-all junto con duration-300 asegura una animación suave. Con Tailwind, mantienes el CSS limpio, usando solo utilidades necesarias.

Simplifica tu código CSS y mejora la gestión del estilo de tus gráficos con Tailwind.