@jackmaturan/tailwind-animate-css

tailwind-animate-css

A collection of Tailwind CSS v4.0 utilities for creating beautiful animations. Includes ready-to-use animations accordion-down, accordion-up and caret-blink, as well as a set of utilities for creating your own animations.

This package is a replacement for tailwindcss-animate. It embraces the new CSS-first architecture, providing a pure CSS solution for adding animation capabilities to your Tailwind CSS project without relying on the legacy JavaScript plugin system or having to define all keywords from scratch.

ℹ️ NOTE
npm: The unscoped name tailwind-animate-css is blocked (too similar to tailwind-animatecss). Install @jackmaturan/tailwind-animate-css instead. The upstream package tw-animate-css remains the original npm name from Wombosvideo.

Support

This scoped package is maintained by @jackmaturan. If it helps your project, consider sponsoring on GitHub.

The animations are based on the excellent work of Luca Bosin (@Wombosvideo) and tw-animate-css. You can support the original author as well.

Table of Contents

• Demo
• Getting Started
  • NPM
  • Manual Download
• Usage
  • Enter/Exit Animations
    • Base Classes
    • Parameter Classes
    • Transform Classes
  • Ready-to-Use Animations
• Examples
• Support
• Notes on Compatibility

Demo

A local Vite playground lives in examples/demo. From the repo root:

pnpm install
pnpm demo   # dev server at http://localhost:5173 (use Ports / Network URL on remote hosts)

Vite prints a Local and Network URL. Use the Network URL when you are on a remote machine (Cursor, Codespaces, SSH).

• Dev server: port 5173 (pnpm demo)
• Static preview after build: pnpm demo:preview → port 4173

In Cursor, open the Ports view, ensure port 5173 is forwarded, then open the forwarded link in your browser.

Getting Started

NPM

• Install the package with npm:

  npm install -D @jackmaturan/tailwind-animate-css
  

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

  @import "@jackmaturan/tailwind-animate-css";
  

• Start using the animations!

  <!-- Add an animated fade and zoom entrance -->
  <div class="animate-in fade-in zoom-in">...</div>
  
  <!-- Add an animated slide to top-left exit -->
  <div class="animate-out slide-out-to-top slide-out-to-left">...</div>
  
  <!-- Control animation duration -->
  <div class="duration-300 ...">...</div>
  
  <!-- Control animation delay -->
  <div class="delay-150 ...">...</div>
  
  <!-- And so much more! -->
  

ℹ️ NOTE
The above guide works for 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

• Download the tailwind-animate.css file from GitHub and place it next to your app.css or globals.css file.

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

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

• Start using the animations!

  <!-- Add an animated fade and zoom entrance -->
  <div class="animate-in fade-in zoom-in">...</div>
  
  <!-- Add an animated slide to top-left exit -->
  <div class="animate-out slide-out-to-top slide-out-to-left">...</div>
  
  <!-- Control animation duration -->
  <div class="duration-300 ...">...</div>
  
  <!-- Control animation delay -->
  <div class="delay-150 ...">...</div>
  
  <!-- And so much more! -->
  

Usage

Enter/Exit Animations

To keep the README concise, I'll define a few variables:

• <io>: Specify the type of animation. This can be in for enter or out for exit animations.
• <dir>: Specify the direction of the slide. This can be in-from-top, in-from-bottom, in-from-left, in-from-right, in-from-start, in-from-end, out-to-top, out-to-bottom, out-to-left, out-to-right, out-to-start, or out-to-end.
• *: Specify a value to apply. See list of possible values.

Base Classes

Class	Description
animate-<io>	Base class for enter/exit animations. This needs to be applied in order for enter/exit animations to work.

Parameter Classes

To customize the animation parameters, use the following classes:

Class	Description
duration-*	Sets animation-duration. Uses --tw-duration, see Tailwind CSS docs. Defaults to duration-150.
ease-*	Sets animation-timing-function. Uses --tw-ease, see Tailwind CSS docs. Defaults to ease-[ease].
delay-*	Sets animation-delay. Possible values: Any <number>, initial, or any other [<value>].
repeat-*	Sets animation-iteration-count. Possible values: Any <number>, infinite, initial or any other [<value>].
direction-*	Sets animation-direction. Possible values: normal, reverse, alternate, alternate-reverse, initial or any other [<value>].
fill-mode-*	Sets animation-fill-mode. Possible values: none, forwards, backwards, both, initial or any other [<value>].
running	Sets animation-play-state to running.
paused	Sets animation-play-state to paused.
play-state-*	Sets animation-play-state. Possible values: initial or any other [<value>].

Transform Classes

Class	Description
blur-in-*	Applies a blur effect on the element when it enters. Possible values: blur-in, blur-in-<number>, blur-in-(<custom-property>), or blur-in-[<value>].
blur-out-*	Applies a blur effect on the element when it exits. Possible values: blur-out, blur-out-<number>, blur-out-(<custom-property>), or blur-out-[<value>].
fade-<io>	Fades the element in from or out to opacity: 0.
fade-<io>-*	Fades the element in from or out to the specified value. Possible values: Any <number> (percentage) or any other [<value>].
zoom-<io>	Zooms the element in from or out to scale3D(0,0,0).
zoom-<io>-*	Zooms the element in from or out to the specified value. Possible values: Any <number> (percentage) or any other [<value>].
spin-<io>	Spins the element in from or out to rotate(30deg).
spin-<io>-*	Spins the element in from or out to the specified value. Possible values: Any <number> (degrees) or any other [<value>].
slide-<dir>	Slides the element in from or out to the specified direction (100%).
slide-<dir>-*	Slides the element in from or out to the specified value. Possible values: Any <number> (percentage) or any other [<value>].

Ready-to-Use Animations

Class	Description
accordion-down	Accordion down animation. Requires --radix-accordion-content-height or one of the other accordion content height variables to be set to the content's height.
accordion-up	Accordion up animation. Requires --radix-accordion-content-height or one of the other accordion content height variables to be set to the content's height.
collapsible-down	Collapsible down animation. Requires --radix-collapsible-content-height or one of the other collapsible content height variables to be set to the content's height.
collapsible-up	Collapsible up animation. Requires --radix-collapsible-content-height or one of the other collapsible content height variables to be set to the content's height.
caret-blink	Blinking animation for caret/cursor.

By the way, if you don't use some of the above animations, they will not be included in the final CSS file. This is because Tailwind CSS kind of does tree-shaking for you. So, if you don't use accordion-down, it won't be included in the final CSS file.

Examples

Basic usage:

<div class="animate-in fade-in slide-in-from-top-8 duration-500">
  Fade in from 0% opacity,<br />
  slide from top by 8 spacing units (2rem),<br />
  with a 500ms duration.
</div>

Advanced usage:

<div
  class="data-[state=show]:animate-in data-[state=hide]:animate-out fade-in slide-in-from-top-8 fade-out slide-out-to-top-8 duration-500"
  data-state="show"
>
  <p>
    If the element has the <code>data-state="show"</code> attribute,<br />
    fade in from 0% opacity,<br />
    slide from top by 8 spacing units (2rem),<br />
    with a 500ms duration.
  </p>
  <p>
    If the element has the <code>data-state="hide"</code> attribute,<br />
    fade out to 0% opacity,<br />
    slide to top by 8 spacing units (2rem),<br />
    with a 500ms duration.
  </p>
</div>

Notes on Compatibility

ℹ️ NOTE
I use only a small portion of the original plugin, 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.