Getting Started

In a project where you are using Tailwind CSS v3, run the following command:

npm install -D animated-tailwindcss

Then configure your tailwind.config.js to use the animations:

const withAnimations = require('animated-tailwindcss');

module.exports = withAnimations({
  // your (existing) Tailwind CSS config here
});
Example
// tailwind.config.js
const withAnimations = require('animated-tailwindcss');

module.exports = withAnimations({
  content: [],
  theme: { extend: {} },
  variants: { extend: {} },
  plugins: [],
});

After proper config, you can use the animations of Animate.css the same way as you use those of Tailwind CSS:

<h1 class="animate-bounce animate-infinite">Forever Bouncing Heading</h1>

NOTES

  • If you are coming from classical Animate.css, please note that you need to reference the classes as .animate-... instead of .animate__....

  • Also, to avoid conflicts, the built-in animations (spin, ping, pulse, bounce) are prefixed by tw, i.e. spin becomes twSpin.

  • The animations this package provides are not exactly same as that of Animate.css. We have done some cleaning up to provide you with more consistent animations.

With Play CDN

It is as simple as this.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Welcome</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <script type="module">
      import withAnimations from 'https://cdn.skypack.dev/animated-tailwindcss';
      tailwind.config = withAnimations();
    </script>
  </head>

  <body>
    <div class="flex h-screen items-center justify-center">
      <div class="animate-tada text-2xl animate-slow animate-infinite">Hi!</div>
    </div>
  </body>
</html>

WARNING

The Play CDN is not suitable for production builds, and the above example will not work if your browser does not support JS modules (Can I use?).