tailwindcss-animate

tailwindcss-animate is a Tailwind CSS plugin that adds animate-in and animate-out utility classes for building enter and exit animations directly in markup. It layers fade, zoom, spin, and directional slide effects on top of two shared CSS @keyframes, and exposes duration, delay, easing, direction, fill-mode, and repeat controls that extend Tailwind’s existing transition theme rather than introducing a parallel one.

The plugin ships as pure CSS with no client-side JavaScript, and has become the de facto animation layer for Radix UI and shadcn/ui component libraries, where it drives open/close transitions for dialogs, dropdowns, popovers, and toasts via data-state attributes.

What You Get

• animate-in / animate-out utility classes built on a shared pair of enter/exit CSS @keyframes
• Composable modifiers - fade-in/out, zoom-in/out, spin-in/out, and slide-in-from-/slide-out-to- directional variants that stack additively
• Full animation-timing control - duration-, delay-, ease-, direction-, fill-mode-, and repeat- utilities mapped onto Tailwind’s existing transition theme
• running/paused play-state utilities, plus inherited motion-safe/motion-reduce variant support from Tailwind core

Common Use Cases

• Animating Radix UI or shadcn/ui dialogs, dropdowns, and popovers on open/close
• Toast and notification enter/exit sequencing without custom CSS or a JS animation library
• Adding tasteful fade/zoom/slide micro-interactions to any Tailwind project without leaving utility-class syntax
• Animating conditionally-rendered React/Vue components in and out via data-state attributes

Under The Hood

Architecture - Single-file Tailwind plugin (index.js, ~188 lines) built via the tailwindcss/plugin factory. It registers a handler that calls addUtilities/matchUtilities against the Tailwind theme function to inject two @keyframes (enter/exit) plus a matrix of utility classes (animate-in/animate-out, fade-in/out, zoom-in/out, spin-in/out, slide-in-from-/slide-out-to-, duration-, delay-, ease-, fill-mode-, direction-, repeat-, plus running/paused). All animation state is threaded through CSS custom properties (—tw-enter-opacity, —tw-enter-scale, —tw-enter-rotate, —tw-enter-translate-x/y, mirrored for exit) so classes compose additively - animate-in fade-in zoom-in-95 all write into the same shared keyframes via translate3d()/scale3d()/rotate(), rather than each utility owning its own animation. The plugin’s second argument extends Tailwind’s theme config with derived defaults (animationDuration layering onto transitionDuration, etc.), so it ships zero runtime JS - output is pure generated CSS at build time.

Tech Stack - Plain JavaScript (CommonJS, require/module.exports), no TypeScript source - only a 2-line ambient index.d.ts declaring an opaque plugin type with no typed API surface. Single peer dependency: tailwindcss >=3.0.0. Dev tooling is minimal: Prettier (tabs, no semicolons) enforced via a husky + lint-staged pre-commit hook and a CI format:check job; there is no bundler and no build step, index.js ships as-is.

Code Quality - No test suite of any kind - no test script, no test files, no assertions; the only CI check (.github/workflows/checks.yml) runs Prettier formatting, not correctness testing. Error handling is not really applicable, since this is pure declarative config rather than runtime logic. Naming is consistent and CSS-idiomatic (fade-in, zoom-out, slide-in-from-top), and a private filterDefault() helper strips DEFAULT keys from theme objects before building matchUtilities value maps, showing some care to avoid emitting a bare duration utility. The absence of a formal test suite is a real gap, though the surface area is small enough to somewhat mitigate the risk.

API Design - Integration friction is extremely low: a single require(“tailwindcss-animate”) in the plugins array of tailwind.config.js gives consumers a full set of Tailwind-native utility classes with no new syntax to learn (animate-in fade-in zoom-in-95 duration-300). The docs/ directory documents every utility group as its own markdown file, and the README front-loads a compact usage sample. Weaknesses: index.d.ts provides essentially no type information, so there’s no IntelliSense over the utility class names themselves, and a few naming pairs are slightly inconsistent (slide-in-from-top vs slide-out-to-top uses different prepositions for symmetric behavior).