Dar vida a una interfaz con animaciones y transiciones bien aplicadas marca la diferencia entre un proyecto estático y uno profesional. Con Tailwind CSS es posible lograrlo sin escribir CSS personalizado, aprovechando clases utilitarias que controlan duración, tipo de curva y comportamiento en eventos como hover y focus.
¿Cómo agregar transiciones a un botón con Tailwind CSS?
El punto de partida es el botón principal de la página. Para inicializar una transición se utiliza la clase transition-all, que indica al navegador que cualquier cambio de propiedad será animado. A continuación se define la duración con duration-500 (quinientos milisegundos) y la curva de aceleración con ease-in-out [01:18].
Dentro del evento hover se aplican los cambios visuales que el usuario percibirá al pasar el cursor:
hover:bg-primary para cambiar el fondo al color primario.hover:text-white para que el texto sea legible sobre ese fondo.hover:-translate-y-1 para desplazar el botón ligeramente hacia arriba.hover:scale-110 para aumentar su tamaño un diez por ciento.
Un error frecuente es dejar un espacio entre el prefijo hover: y la clase. Tailwind requiere que el modificador y la utilidad estén unidos sin separación; de lo contrario, el estilo se aplica de forma permanente en lugar de solo durante el evento [02:35].
¿Cómo animar el search bar con focus y variantes personalizadas?
El campo de búsqueda utiliza un efecto distinto: al recibir el focus, la barra crece horizontalmente. Se agrega transition con duration-300 al input y luego focus:w-11/12 para expandir el ancho [03:15].
Sin embargo, la animación puede no funcionar de inmediato. Esto ocurre porque Tailwind no trae todas las variantes activadas por defecto. Para optimizar el peso del archivo final, el framework omite combinaciones poco comunes.
¿Qué hacer cuando una variante no responde?
La solución está en el archivo de configuración tailwind.config.js. Dentro de la sección variants se añade la propiedad que necesita los eventos. En este caso se agrega width con las variantes responsive, hover y focus [04:22]:
js
variants: {
width: ['responsive', 'hover', 'focus'],
},
Después de modificar la configuración es obligatorio ejecutar el build desde la terminal para que los nuevos estilos se compilen y estén disponibles en el proyecto [05:00].
¿Por qué es importante conocer el archivo de configuración?
Tailwind CSS es cien por ciento personalizable. Cada clase, variante o extensión se gestiona desde este archivo. Comprender su estructura permite agregar colores, fuentes, breakpoints y variantes sin depender de CSS adicional.
¿Cómo aplicar transiciones a las cards del catálogo?
Las cards de la sección de recomendados tienen una clase aislada definida en la hoja de estilos de Tailwind. Allí se agrega directamente la transición [06:02]:
transform para habilitar transformaciones.transition-all para animar cualquier cambio.hover:-translate-y-4 para elevar la card al pasar el cursor.hover:shadow-xl para intensificar la sombra y generar un efecto de profundidad.
Tras modificar el archivo de estilos, se ejecuta nuevamente el build. Al probar el resultado aparece un detalle: el scroll vertical genera ruido visual cuando las cards se desplazan hacia arriba. La solución es ir al contenedor padre en el archivo index y reemplazar el overflow en el eje Y por overflow-y-hidden, manteniendo únicamente el scroll horizontal [07:05].
Finalmente, se aplica la tipografía Montserrat a todo el body con la clase font-montserrat. Este cambio afecta las proporciones de algunos elementos, por lo que se ajusta el botón: se modifica su ancho a w-48 y el tamaño del texto de xl a lg para mantener la coherencia visual [07:38].
Con las transiciones del botón, el search bar y las cards funcionando correctamente, la interfaz ya responde de forma fluida a la interacción del usuario. Si encontraste algún comportamiento inesperado al activar variantes, comparte tu experiencia en los comentarios.
