A configurable Animate.css integration for Tailwind CSS 3. It reads the installed Animate.css catalog at build time, emits only the animations you select, and namespaces generated keyframes to prevent collisions.

Global duration, delay, and iterationCount values are passed to @aaron205whitmore/postcss-animate-utils, which generates the corresponding Tailwind base custom properties.

Installation

npm install tailwindcss-keyframe-kit animate.css

Basic usage

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx,vue,svelte}'],
  plugins: [
    require('tailwindcss-keyframe-kit')({
      animations: ['bounce', 'fadeIn', 'fadeOut', 'slideInUp']
    })
  ]
};

Apply the base class together with an animation class:

<div class="keyframe keyframe-fade-in">Content</div>

Animation names are converted to kebab case in generated class names. For example, fadeInDownBig becomes keyframe-fade-in-down-big.

Configuration

require('tailwindcss-keyframe-kit')({
  prefix: 'motion',
  animations: ['bounce', 'fadeIn'],
  exclude: ['bounce'],
  aliases: {
    enter: 'fadeIn'
  },
  duration: '900ms',
  delay: '0s',
  iterationCount: '1',
  namespaceKeyframes: true,
  respectReducedMotion: true,
  modifiers: true,
  durations: {
    quick: '300ms',
    deliberate: '1400ms'
  },
  delays: {
    short: '150ms',
    long: '800ms'
  },
  repeats: {
    twice: '2',
    forever: 'infinite'
  }
})

Option	Default	Purpose
`prefix`	`keyframe`	Prefix for classes and generated keyframes
`animations`	`'*'`	Animate.css names to include; `'*'` includes the full catalog
`exclude`	`[]`	Animation names to omit
`aliases`	`{}`	Public class names mapped to Animate.css animation names
`duration`	`1s`	Default animation duration
`delay`	`0s`	Default animation delay
`iterationCount`	`1`	Default iteration count
`namespaceKeyframes`	`true`	Prefix keyframe identifiers to prevent collisions
`respectReducedMotion`	`true`	Minimize animation when the user requests reduced motion
`modifiers`	`true`	Generate timing, repeat, pause, and run utilities
`durations`	Built-in map	Duration modifier tokens
`delays`	Built-in map	Delay modifier tokens
`repeats`	Built-in map	Iteration modifier tokens

The deprecated classes option remains an alias for animations during migration.

Generated utilities

With the default prefix, the plugin generates:

<div class="keyframe keyframe-bounce keyframe-duration-fast keyframe-delay-1s keyframe-repeat-2"></div>

keyframe-duration-{token} sets the duration variable.
keyframe-delay-{token} sets the delay variable.
keyframe-repeat-{token} sets the iteration-count variable.
keyframe-paused and keyframe-running control playback.

Tailwind variants work normally:

<div class="keyframe keyframe-fade-in hover:keyframe-paused md:keyframe-duration-slow"></div>

Aliases

Aliases provide stable semantic names without copying keyframes:

require('tailwindcss-keyframe-kit')({
  animations: [],
  aliases: {
    notificationEnter: 'fadeInDown',
    notificationExit: 'fadeOutUp'
  }
})

<aside class="keyframe keyframe-notification-enter"></aside>

Catalog

The package exposes the animation names found in the installed Animate.css version:

const keyframes = require('tailwindcss-keyframe-kit');
console.log(keyframes.catalog());

Project structure

src/
  index.js            Tailwind plugin entry point
  errors.js           Package name and error message helper
  options/            Defaults, validators, and option normalization
  catalog/            Resolves and parses the installed Animate.css
  generators/         Builds base styles (variables, keyframes, reduced motion) and utilities
  utils/              Small shared helpers
test/                 node:test suites per area

Migration from 1.x

The default class prefix changed from animatecss to keyframe.
Generated animation class names use kebab case.
Keyframe names are namespaced by default.
animations replaces classes; classes remains a compatibility alias.
@aaron205whitmore/postcss-animate-utils now processes global timing options and is installed automatically.
Reduced-motion handling is enabled by default.