tw-animate-css

tw-animate-css is a collection of Tailwind CSS v4.0 utilities for building beautiful, declarative animations directly from your markup. It embraces Tailwind v4’s CSS-first architecture, providing enter/exit, fade, zoom, spin, blur, and slide utility classes as pure CSS without any JavaScript plugin.

Designed as a drop-in successor to the popular tailwindcss-animate plugin, it ships ready-to-use animations like accordion-down, accordion-up, and caret-blink, and integrates seamlessly with component libraries such as shadcn/ui, Radix, and Reka. You install it with a single import line and Tailwind tree-shakes any unused animations out of your final bundle.

What You Get

• A one-line @import "tw-animate-css" setup with no JavaScript plugin configuration required
• Enter/exit animation primitives (animate-in, animate-out) with fade, zoom, spin, blur, and directional slide modifiers
• Fine-grained parameter classes for duration, easing, delay, iteration count, direction, fill-mode, and play-state
• Ready-to-use animations for accordion, collapsible, and caret-blink patterns used by shadcn/ui and Radix
• A prefix-compatible build (tw-animate-css/prefix) for projects using the Tailwind prefix(...) import syntax

Common Use Cases

• Animating shadcn/ui and Radix components such as accordions, collapsibles, dialogs, and dropdowns
• Adding entrance and exit transitions to elements based on data-state attributes
• Migrating an existing Tailwind v3 project off tailwindcss-animate to Tailwind v4
• Composing custom keyframe-free animations directly in HTML class lists

Under The Hood

Architecture - The entire library is authored as a single ~580-line source stylesheet (src/tw-animate.css) that leans on Tailwind CSS v4’s CSS-first custom-utilities model. It declares typed CSS @property custom properties (e.g. --tw-animation-duration, --tw-enter-opacity, --tw-enter-scale) with inherits: false to isolate animation state per element, then composes @keyframes and @utility definitions that read those variables so classes like animate-in, fade-in, and slide-in-from-top combine predictably at the CSS layer with no runtime JavaScript. Tech Stack - Pure CSS output with a small Node build pipeline: @tailwindcss/cli compiles and minifies src/tw-animate.css into dist/tw-animate.css, and a ~50-line transform.ts post-processes the result via two regex passes to rewrite spacing calc(--value(...) * var(--spacing)) expressions into Tailwind’s --spacing(--value(...)) form, producing the prefix-compatible dist/tw-animate-prefix.css. Dev tooling is Prettier (with the Tailwind plugin), commitlint, lint-staged, and simple-git-hooks, managed with pnpm. Code Quality - The codebase is small, single-authored, and heavily commented, with clear rationale notes on each @property declaration; the build transform includes argument validation and try/catch error handling with non-zero exit codes. There is no automated test suite, which is the main quality gap, though the surface area is narrow and output is deterministic. API Design - The public API is a single import line plus a well-documented vocabulary of utility classes mirroring the familiar tailwindcss-animate naming, which keeps the learning curve low for anyone migrating. The README is thorough, with class reference tables, basic and advanced examples, and compatibility notes, making the developer experience approachable despite the terse class grammar.