@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.

<divclass="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.jsconstanimate=require('@jcamp/tailwindcss-plugin-animate')module.exports={theme: {// ...},plugins: [animate({/* options */}),// ...],}

// tailwind.config.tsimporttype{Config}from'tailwindcss'importanimatefrom'@jcamp/tailwindcss-plugin-animate'exportdefault<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