https://github.com/wombosvideo/tw-animate-css
TailwindCSS v4.0 compatible replacement for `tailwindcss-animate`
https://github.com/wombosvideo/tw-animate-css
animation tailwindcss tailwindcss-animate tailwindcss-v4
Last synced: 25 days ago
JSON representation
TailwindCSS v4.0 compatible replacement for `tailwindcss-animate`
- Host: GitHub
- URL: https://github.com/wombosvideo/tw-animate-css
- Owner: Wombosvideo
- License: mit
- Created: 2025-01-28T13:35:25.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-03-28T09:49:18.000Z (about 1 month ago)
- Last Synced: 2025-04-06T23:15:04.324Z (25 days ago)
- Topics: animation, tailwindcss, tailwindcss-animate, tailwindcss-v4
- Language: CSS
- Homepage: https://www.npmjs.com/package/tw-animate-css
- Size: 66.4 KB
- Stars: 199
- Watchers: 2
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# tw-animate-css
TailwindCSS v4.0 compatible replacement for [`tailwindcss-animate`][Original_Plugin_GitHub].
Instead of being an old-fashioned JavaScript plugin, this package provides a
CSS file defining custom utilities based on the new
[CSS-first architecture][TailwindCSS_Custom_Utilities].
## Installation
### NPM
1. Install the package with `npm`:
```bash
npm install -D tw-animate-css
```
2. Add the following line to your `app.css` or `globals.css` file:
```css
@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][Create_Issue] how it works and I'll update the documentation.
### Manual download
1. Download the [`tw-animate.css`][CSS_File]
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:
```css
@import "./tw-animate.css";
```
3. Start using the animations!
## Usage
> [!NOTE]
> The documentation is currently under construction. Please refer to the [original documentation][Original_Plugin_Docs] 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.
[Original_Plugin_GitHub]: https://github.com/jamiebuilds/tailwindcss-animate
[Original_Plugin_Docs]: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/README.md
[TailwindCSS_Custom_Utilities]: https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities
[Create_Issue]: https://github.com/Wombosvideo/tw-animate-css/issues/new
[CSS_File]: https://raw.githubusercontent.com/Wombosvideo/tw-animate-css/refs/heads/main/src/tw-animate.css