Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/jamiebuilds/tailwindcss-animate/llms.txt

Use this file to discover all available pages before exploring further.

tailwindcss-animate is a Tailwind CSS plugin that adds a suite of composable animation utilities to your project. Instead of writing custom keyframes or inline styles, you apply utility classes directly in your markup to control entrance and exit animations, duration, delay, easing, and more — all within the Tailwind workflow you already know.
1

Install the package

Add tailwindcss-animate to your project as a dev dependency using your preferred package manager.
npm install -D tailwindcss-animate
2

Register the plugin

Open your tailwind.config.js file and add tailwindcss-animate to the plugins array.
tailwind.config.js
// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require("tailwindcss-animate"),
    // ...
  ],
}
3

Use the utilities

Apply animation classes directly in your HTML. Combine animate-in or animate-out with modifier utilities to describe the animation you want.
<!-- Add an animated fade and zoom entrance -->
<div class="animate-in fade-in zoom-in">...</div>

<!-- Add an animated slide to top-left exit -->
<div class="animate-out slide-out-to-top slide-out-to-left">...</div>
tailwindcss-animate requires Tailwind CSS v3.0 or later as a peer dependency.

​
Next steps

Enter animations

Fade, zoom, spin, and slide elements into view with composable enter utilities.

Exit animations

Animate elements out of the DOM with matching exit utilities.

Animation utilities

Control duration, delay, easing, fill mode, and iteration count.

Customization

Extend the default theme to add your own animation values.

Build docs developers (and LLMs) love

Get started for freeTalk to us