npm install amazing-tailwind-animations

Open in Github Open in Vercel

Add the plugin into your tailwind.config.mjs.

Note: if you are using CommonJS, make sure to import the plugin with the require('') method.

import amazingAnimations from 'amazingAnimations'

export default {
   // rest of your config
     plugins: [amazingAnimations]
}

You can add your animations to your components adding the animation name to your classNames with the prefix animate- or you can just click on the animation of your preference and the className will be copied into your clipboard!

You can also use the animations with the hover: and focus: states

For example:

<div class="animate-bounce"> <!-- Your content here --> </div>

<button class="hover:animate-pulse"> <!-- Your content here --> </button>

<input type="text" class="focus:animate-wobble">

You can also customize your animation-delay animation-duration animation-steps and much more!

Go ahead and check our complete documentation.