🎞️ Animaciones Personalizadas en Tailwind CSS

🔧 En Tailwind CSS v3

En Tailwind v3, las animaciones personalizadas se configuran directamente dentro de tailwind.config.js usando las propiedades theme.extend.keyframes y theme.extend.animation.

📁 Paso a paso:

1. Abre tailwind.config.js.
2. Agrega las keyframes y las animaciones al objeto extend.
3. Usa la clase personalizada animate-[nombre] en tu HTML.

module.exports = {
  theme: {
    extend: {
      keyframes: {
        blink: {
          '0%, 100%': { opacity: '1' },
          '50%': { opacity: '0' }
        }
      },
      animation: {
        blink: 'blink 1s ease-in-out infinite'
      }
    }
  }
}

    

✅ Resultado:

🆕 En Tailwind CSS v4

En Tailwind v4 puedes definir animaciones personalizadas directamente en tu archivo CSS usando la regla @theme. Esto te permite crear animaciones reutilizables sin necesidad de editarlas en tailwind.config.js.

📁 Paso a paso:

1. Crea un archivo CSS (por ejemplo: index.css).
2. Usa @theme para definir tus variables y keyframes.
3. Aplica tu animación con animate-nombre.

@theme {
  --animate-blink: blink 1s ease-in-out infinite;

  @keyframes blink {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }
}

  

✅ Resultado:

🧩 Plugin de animaciones en Tailwind v3

Puedes usar el plugin @midudev/tailwind-animations para acceder a un conjunto de animaciones listas para usar como clases animate-*. Este plugin es útil si deseas agregar efectos sin tener que definir manualmente los keyframes en tu configuración.

📁 Paso a paso:

1. Crea el archivo tailwind.config.js si aún no existe.
2. Instala el plugin con el siguiente comando:

npm install @midudev/tailwind-animations

3. Importa el plugin en tu configuración y agrégalo a plugins.
4. Usa las clases en tu HTML como animate-wobble.

import animations from '@midudev/tailwind-animations'

export default {
  // otras opciones...
  plugins: [
    animations
  ]
}

🧩 Plugin de animaciones en Tailwind v4

En Tailwind v4 puedes usar el plugin @midudev/tailwind-animations directamente en tu archivo index.css gracias al nuevo sistema basado en CSS y plugins con @plugin. Esto te permite importar animaciones sin modificar el archivo de configuración.

📁 Paso a paso:

1. Crea un archivo index.css si aún no lo tienes.
2. Instala el plugin con el siguiente comando:

npm install @midudev/tailwind-animations

3. Importa Tailwind y el plugin en index.css usando @plugin.
4. Usa las clases como animate-wobble directamente en tu HTML.

@import "tailwindcss";

@plugin '@midudev/tailwind-animations';