Getting Started

In a project where you're using Tailwind CSS v3, run this to install this package:

npm add -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

const { withAnimations } = require('animated-tailwindcss')

module.exports = withAnimations({
  content: ['./src/**/*.{html,js}'],
  theme: { extend: {} },
  plugins: [],
})

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

html

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

Notes

If you're coming from classical Animate.css, please note that you need to reference the classes using hyphen instead of underscores (e.g., animate-bounce instead of animate__bounce).
The built-in animations (spin, ping, pulse, bounce) are prefixed by tw. So, if you want Tailwind CSS' bounce you need to write animate-twBounce instead of animate-bounce.
The animations this package provides are not exactly same as that of Animate.css. We have done some modifications to provide you with more consistent and customizable animations.

With Play CDN

It is as simple as this:

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Welcome</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <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 ES6 modules (Can I use? ).

Getting Started #

With Play CDN #

Getting Started

With Play CDN