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

``html


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

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

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

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

export default >{
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