Skip to content

Latest commit

 

History

History
61 lines (42 loc) · 1.9 KB

README.md

File metadata and controls

61 lines (42 loc) · 1.9 KB

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.