tw-animate-css vs tailwindcss-animate

Use tw-animate-css on Tailwind v4. It replaces tailwindcss-animate, which was a plugin for Tailwind v3. The shadcn CLI installs tw-animate-css in new projects, and the class names your components use stay the same. A project still on Tailwind v3 keeps tailwindcss-animate.

The two compared

Both play the same two keyframes. animate-in runs one called enter, and classes like fade-in-0 or zoom-in-95 set where it starts from. animate-out runs exit, and the *-out classes set where it ends. That is why the classes carry over: we compiled the ones shadcn uses with both, and fade-in-0, zoom-in-95, slide-in-from-top-2 and the 150 ms default duration come out with the same values.

The author of tw-animate-css says it uses only part of the original plugin and may not be a 100% drop-in replacement. If you wrote your own classes on top of tailwindcss-animate, check them after switching.

Switch from tailwindcss-animate to tw-animate-css

Do this when you move a project to Tailwind v4, or straight after if your components stopped animating.

1. Swap the packages:

npm uninstall tailwindcss-animate
npm install -D tw-animate-css

2. Remove the plugin. In tailwind.config.js it is require("tailwindcss-animate") in plugins. If your stylesheet already loads it the v4 way, delete this line:

@plugin "tailwindcss-animate";

3. Import tw-animate-css under Tailwind. Projects with components from a current shadcn CLI also need shadcn/tailwind.css, which maps data-open: and data-closed: to both Radix and Base UI:

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

4. Delete the accordion-down and accordion-up keyframes you may have copied into tailwind.config.js from shadcn's v3 setup. tw-animate-css and shadcn/tailwind.css define them now.

5. Restart the dev server.

You should see dialogs fade and zoom in, sheets slide from their edge and accordions ease open. If the build stops with Can't resolve 'tw-animate-css', or dialogs open from the top-left corner, the troubleshooting guide covers both.

What neither one does

Both packages give an element one animation when it appears and one when it leaves. That covers most of shadcn/ui's motion, and some things fall outside it:

• Keeping an element on the page while it leaves. The exit animation only plays if something delays the removal. Radix and Base UI do that for their own parts. A plain {open && <div />} in React is removed at once.
• Animating to height: auto. The accordion and collapsible keyframes read a height variable that Radix or Base UI sets. Your own elements need a library to measure them.
• Moving between two places. A card that grows into a detail page, a tab indicator that slides, or a list that reflows needs the element's position before and after, which CSS classes can't see.
• Springs and gestures. Both use CSS timing curves only. Motion (Framer Motion) is the usual choice for drag, springs and layout animation.

For shadcn/ui, Keyframery adds the motion these classes can't: dialogs that grow from the button you pressed, tabs that slide and lists that reflow. It reads the same state attributes and leaves your components as they are. See the Quick start.