Tailwind es un framework muy poderoso que cambió el paradigma tradicional de CSS. Aunque es una herramienta muy versátil, contiene pocas animaciones por defecto y para hacer efectos personalizados es necesario crearlas manualmente. En este artículo aprenderás a crear animaciones personalizadas con Tailwind y podrás compararlas con CSS tradicional.

En este artículo aprenderás:

1. ¿Cómo crear animaciones customizadas con Tailwind y CSS tradicional?

Si no conoces Tailwind, aquí puedes empezar a aprender este increíble framework.

Tailwind viene por defecto con 4 animaciones (ping, bounce, spin y pulse). Aunque estas animaciones son de gran utilidad, la mayoría del tiempo vamos a querer tener efectos más personalizados para nuestras aplicaciones. Tailwind ofrece la flexibilidad de extender cualquier de sus clases para poder crear clases personalizadas. En los siguientes bloques de código podrás ver cómo conseguir lo anterior y tambien podrás compararlo con la manera de hacerlo con CSS tradicional.

Nota: Para extender cualquier clase en Tailwind, el lugar al que vamos a ir siempre es al archivo tailwind.config.js.

¿Cómo crear animaciones customizadas y CSS tradicional?