Question 1

What is tailwind-animations?

Accepted Answer

tailwind-animations is an open-source Tailwind CSS plugin that adds 79+ ready-to-use animation utility classes such as fade-in, slide-in, zoom, bounce, scroll-driven animations, and native dialog entry/exit effects—with zero configuration.

Question 2

How do I install Tailwind CSS animations?

Accepted Answer

Install with npm install tailwind-animations (or pnpm, yarn, bun, or deno), then import the plugin in your CSS with @import 'tailwindcss'; and @import 'tailwind-animations'; for Tailwind CSS v4.

Question 3

Does it work with Tailwind CSS v3 and v4?

Accepted Answer

Yes. Use the latest tailwind-animations package with Tailwind CSS v4 via CSS imports. For Tailwind CSS v3, install the last v3-compatible release: @midudev/tailwind-animations@0.2.0.

Question 4

How do I animate an element with a utility class?

Accepted Answer

Add a class such as animate-fade-in or animate-slide-in-bottom to any HTML element. You can combine duration, delay, and timing utilities like animate-duration-slow and animate-delay-300.

Question 5

Can I create scroll-based animations?

Accepted Answer

Yes. Use timeline-view and animate-range utilities to synchronize CSS animations with an element position in the viewport for scroll-driven motion.

Question 6

Is the plugin free and open source?

Accepted Answer

Yes. tailwind-animations is free, MIT licensed, and open source on GitHub under midudev/tailwind-animations.

Compose animations live