tw-animations

Extended animation utilities for Tailwind CSS v4.

Note: This package is for Tailwind CSS v4. If you're using Tailwind CSS v3, use tw-animations-plugin instead.

Installation

npm install tw-animations

Usage

Add the import to your CSS file:

@import "tailwindcss";
@import "tw-animations";

Start using animations:

<div class="animate-fade-in">Hello World!</div>

<button class="animate-bounce animate-infinite">Click me</button>

Features

• 85+ animation utilities
• Scroll animations and view timelines
• Animation control utilities (duration, delay, timing, etc.)
• Arbitrary value support
• CSS Custom Properties for theming

Documentation

For full documentation, visit tailwindcss-animate.vercel.app

New in v2.0

• Scroll Animations - View timelines and animation ranges
• 12 New Animations - blurred-fade-in, rotate-360, expand-horizontally, and more
• Enhanced Controls - Better support for arbitrary values

License

MIT