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 extends Tailwind CSS with a set of animation utilities that make it simple to add polished enter and exit transitions to any element. Combine animate-in or animate-out with fade, zoom, spin, and slide modifiers to build expressive motion — all without leaving your HTML.

Installation

Install the plugin and add it to your Tailwind config in minutes

Enter animations

Fade, zoom, spin, and slide elements into view with animate-in

Exit animations

Smoothly dismiss elements with fade-out, zoom-out, and slide-out utilities

Animation utilities

Control timing, delay, direction, fill mode, and more

​
Quick example

Combine multiple utilities to create rich animations in a single class string: 
<!-- Fade and zoom in on enter -->
<div class="animate-in fade-in zoom-in duration-300">...</div>

<!-- Slide out to the top on exit -->
<div class="animate-out slide-out-to-top duration-200">...</div>

<!-- Stagger with delay -->
<div class="animate-in fade-in delay-150">Item 1</div>
<div class="animate-in fade-in delay-300">Item 2</div>
<div class="animate-in fade-in delay-500">Item 3</div>

​
How it works

The plugin registers two core keyframe animations — enter and exit — driven by CSS custom properties. Utilities like fade-in, zoom-in, and slide-in-from-top set the appropriate CSS variable, which the keyframe picks up automatically. This design lets you stack multiple effects without conflicts.
1

Install the plugin

Add tailwindcss-animate to your project with your preferred package manager.
2

Register the plugin

Add require("tailwindcss-animate") to the plugins array in tailwind.config.js.
3

Add utilities to your HTML

Use animate-in or animate-out together with effect modifiers like fade-in, zoom-in, or slide-in-from-top.
4

Customize as needed

Extend animationDuration, animationDelay, and other theme keys in your Tailwind config to match your design system.
tailwindcss-animate requires Tailwind CSS v3.0 or later as a peer dependency.

Build docs developers (and LLMs) love

Get started for freeTalk to us