tw-animate-css

TailwindCSS v4.0 compatible replacement for tailwindcss-animate (GitHub, npm).

Instead of being an old-fashioned JavaScript plugin, this package provides a CSS file defining custom utilities based on the new CSS-first architecture.

Installation

NPM

1. Install the package with npm:

   npm install tw-animate-css

2. Add the following line to your app.css or globals.css file:

   @import "tw-animate-css";

3. Start using the animations!

Note

This code works with esbuild, Vite and probably other bundlers too. If you are using a different bundler, the syntax may differ. Let me know how it works and I'll update the documentation.

Manual download

1. Download the tw-animate.css file from GitHub and place it next to your app.css.

2. Add the following line to your app.css or globals.css file:

   @import "./tw-animate.css";

3. Start using the animations!

Usage

Refer to the original documentation for more information.

Note

I use very litte of the original library, so it might not be a 100% compatible drop-in replacement. If you notice any inconsistencies, feel free to contribute to this repository by opening a pull-request.