@jcamp/tailwindcss-plugin-animate

@jcamp/tailwindcss-plugin-animate

Tailwind CSS Animation Plugin

An updated animation plugin for Tailwind CSS v3

Easily add animations to your Tailwind projects. Uses the animations from animate.css but through Tailwind's system.

<div class="animate-shake-x animate-delay animate-infinite">(icon)</div>

Keyframes are only added to the generated CSS if an animation using them is added.

Install

npm i -D @jcamp/tailwindcss-plugin-animate

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
const animate = require('@jcamp/tailwindcss-plugin-animate')
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    animate({
      /* options */
    }),
    // ...
  ],
}

// tailwind.config.ts
import type { Config } from 'tailwindcss'
import animate from '@jcamp/tailwindcss-plugin-animate'

export default <Partial<Config>>{
  theme: {
    // ...
  },
  plugins: [
    animate({
      /* options */
    }),
  ],
}

Configuration

Refer to the type definition for all configurations avaliable.

Credits

This plugin is heaviliy inspired by and based on the work of tailwindcss-animate.css created by Fabian Bentz. Unfortunately, this package has not been updated in a few years and not for Tailwind v3 either.

It is also includes some ideas by Jamie Kyle and his work at tailwindcss-animate. I wanted more keyframes built in, but liked his ideas for matching utilities.

License

MIT License © 2022-PRESENT John Campion