Animate.css with Tailwind CSS
Tags: animatecss, tailwindcss, animations, configuration
Published: 2021-06-09 17:33:27

If you have used [Tailwind CSS](https://tailwindcss.com/), you might have noticed that it lacks proper animation utilities. It has only [four animations](https://tailwindcss.com/docs/animation) by default - spin, ping, pulse, and bounce. This limitation makes us search for other methods and additional frameworks to animate the components. The most common one is [Animate.css](https://github.com/animate-css/animate.css) if you don't want to write all the keyframes yourself.

Animate.css (like Tailwind CSS) provides [animation utility classes](https://animate.style/) and works nicely alongside Tailwind. But since it is just a pure CSS library, it lacks Tailwind features like variants, directives, purging, and even editor tools like [Tailwind Intellisense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss). But what if you can make Tailwind know about the animation classes provided by Animate.css? 

The question will probably make you search for some plugin, and the first one on the list will be [`tailwindcss-animatecss`](https://github.com/bentzibentz/tailwindcss-animate.css). It is a great plugin in itself, except it requires quite a configuration. Although its adjustable (optional) settings are pretty nice, but setting the variants and required classes seems overkill in the new [JIT mode](https://tailwindcss.com/docs/just-in-time-mode).

So, I wrote a configuration myself &ndash; [`animated-tailwindcss`](https://www.npmjs.com/package/animated-tailwindcss). To use the configuration, you just need to install it, import it, and wrap your existing configuration with it. After being properly configured, you can use the animation utilities of Animate.css as if they are a part of the Tailwind CSS! 

All your variants will work with the animation classes. You can use them inside the directives like [`@apply`](https://tailwindcss.com/docs/functions-and-directives#apply) and [`@screen`](https://tailwindcss.com/docs/functions-and-directives#screen). Also, you will not have [extra keyframes](https://tailwindcss.com/docs/optimizing-for-production#removing-unused-keyframes) emitted to the code in production, and in development, you can use the Tailwind Intellisense without any extra configuration! The animation classes are [motion-safe](https://tailwindcss.com/docs/hover-focus-and-other-states#motion-safe) by default, i.e., animations will be disabled if the user [prefers reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).

Please give the configuration a try. If you feel that something went wrong, please comment or create an issue on [GitHub](https://github.com/ikcb/animated-tailwindcss/issues). I am working on adding options to customize duration, delay, etc. They will be available soon!

*Note* that the only difference you will notice if you have used Animate.css earlier is that you need to reference the class names with the prefix `animate-` instead of `animate__`. Also, if you want, you can [customize animations](https://tailwindcss.com/docs/animation#customizing) easily (add new or override the existing ones). Thank you!