Documentation

Complete guide to implementing and customizing TailwindAnimate in your projects.

Quick Start
Get up and running in minutes

1. Install the package

npm install tailwindcss-animate

2. Add to your Tailwind config

plugins: [require('tailwindcss-animate')]

3. Use in your HTML

<div class="animate-fade-in-up">Content</div>
Resources
Browse AnimationsLive ExamplesGitHub Repository
Animation Categories
Understanding different types of animations

Entrance Animations

Fade, slide, and bounce effects

12

Hover Effects

Interactive hover animations

18

Loading States

Spinners and progress indicators

8
Best Practices
Tips for optimal animation performance

Performance

Use transform and opacity for GPU acceleration

Accessibility

Respect prefers-reduced-motion settings

Timing

Keep animations under 500ms for UI interactions