tw-animate-css

TailwindCSS v4.0 compatible replacement for tailwindcss-animate.

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 -D 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 or globals.css file.

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

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

3. Start using the animations!

Usage

Note

The documentation is currently under construction. Please refer to the original documentation for now.

I added the accordion-down, accordion-up and caret-blink animations to the package. They still need their final touches, but I thought I let you know. And you can already use them with the default values.

---

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.