Las animaciones en Tailwind CSS transforman una interfaz estática en una experiencia interactiva. Aquí aprenderás a aplicar transitions, hover y focus en botones, search bars y cards, además de configurar variantes personalizadas en el archivo de Tailwind para que tus efectos respondan correctamente.

Cómo aplico transiciones a un botón en Tailwind CSS

Las transiciones controlan cómo cambia un elemento entre dos estados. En el botón de la sección home, la idea es que al pasar el cursor cambie de color, escale ligeramente y se desplace hacia arriba.

Para lograrlo, agregas estas clases directamente al botón:

• transition-all para activar la animación en todas las propiedades.
• duration-500 para definir el tiempo de la animación.
• ease-in-out para suavizar el inicio y el final.
• hover:bg-primary y hover:text-white para cambiar color de fondo y texto.
• hover:-translate-y-1 y hover:scale-110 para mover y escalar el botón.

Un detalle clave: las clases con prefijo de evento como hover deben escribirse pegadas, sin espacios. Si escribes hover: bg-primary, Tailwind interpretará el color como estado inicial y no como estado de hover.

¿Qué hace transition-all en Tailwind? Activa la transición sobre todas las propiedades animables del elemento, para que cualquier cambio (color, tamaño, posición) ocurra de forma gradual y no instantánea.

Cómo creo una animación en el search bar con focus-within

En el campo input del search bar queremos que al hacer clic crezca a los lados y pierda la sombra. Para eso aplicas:

• transition duration-300 para inicializar la animación.
• focus-within:shadow-none para retirar la sombra al enfocar.
• ring como reemplazo del outline nativo.
• w-11/12 como ancho base y un ancho mayor en focus.

Al probarlo, puede que el ancho no cambie aunque el campo sí reciba el foco. Esto pasa porque Tailwind no activa todas las variantes por defecto para mantener el archivo CSS ligero.

Cómo activo variantes de hover y focus en width

En el archivo tailwind.config.js, dentro de la sección variants, debes habilitar manualmente la variante para width:

js variants: { width: ['responsive', 'hover', 'focus'], }

Después corres el build desde la terminal para regenerar el CSS. Sin esta configuración, las clases tipo focus:w-full simplemente no se generan.

¿Por qué Tailwind no activa todas las variantes por defecto? Para optimizar el peso del archivo final. El framework incluye miles de utilidades, así que solo genera las combinaciones que declares explícitamente.

Cómo animo las cards de la sección de recomendados

Las cards viven en una clase aislada dentro del archivo de Tailwind CSS, así que las animaciones se agregan en ese mismo archivo. La intención es que al pasar el cursor, la card se eleve ligeramente y cambie su sombra.

Las clases que aplicas son:

• transform y transition-all para preparar la animación.
• hover:-translate-y-4 para desplazar la card hacia arriba.
• hover:shadow-lg (o similar) para reforzar el efecto de elevación.

Como modificaste el archivo fuente, necesitas correr el build otra vez para que las nuevas clases se compilen.

Cómo arreglo el scroll vertical que aparece al animar cards

Al elevar las cards con translate-y negativo, el contenedor padre puede mostrar un scroll vertical no deseado. La solución es ir al div contenedor en index y reemplazar el overflow-y por overflow-y-hidden. Así conservas únicamente el scroll horizontal, que es el comportamiento esperado en una galería de tarjetas.

Cómo aplico la tipografía Montserrat a todo el body

Para unificar la identidad visual, agregas la clase font-montserrat al body del documento. Este cambio impacta a toda la página y puede alterar tamaños previamente calculados. Por ejemplo, el botón explorar puede verse desproporcionado.

Los ajustes finos son:

• Cambiar el width del botón a w-48 para darle más aire.
• Reducir el texto de text-xl a text-lg para equilibrar la jerarquía visual.

¿Cómo agrego una fuente personalizada en Tailwind? La declaras en tailwind.config.js dentro de fontFamily y luego la usas como clase utilitaria, por ejemplo font-montserrat aplicada al body o al elemento que necesites.

Con estas transiciones activas en botones, search bar y cards, tu interfaz responde de forma fluida a cada interacción del usuario. ¿Cuál de estas animaciones vas a probar primero en tu proyecto? Cuéntalo en los comentarios.