Adding Animations with Tailwind CSS Plugins
You’ve built a clean Tailwind UI, but it feels static. Adding motion seems like it should be simple—until you’re staring at a blank tailwind.config.js wondering whether you need a plugin, a keyframe, or something else entirely. Here’s a clear map of your options.
Key Takeaways
- Tailwind ships with four built-in animation utilities (
animate-spin,animate-ping,animate-pulse,animate-bounce) that cover loaders, skeletons, badges, and basic attention cues. - For enter/exit animations, directional slides, and scroll-triggered reveals, plugins like
tailwindcss-animateandtailwind-animationsfill the gaps without custom CSS. - Tailwind CSS v4 lets you define custom animations directly in CSS using
@theme, often removing the need for a plugin altogether. - Always wrap non-essential animations with
motion-safe:to respect users who prefer reduced motion.
What Tailwind Gives You Out of the Box
Tailwind ships with four animation utilities that cover a surprising number of real use cases:
animate-spin— rotating loaders and iconsanimate-ping— notification badges and radar effectsanimate-pulse— skeleton loading screensanimate-bounce— scroll indicators and attention cues
For simple state feedback—a loading spinner on a submit button, a pulsing skeleton while data fetches—these built-in Tailwind CSS animations are often all you need. Pair them with transition utilities (transition, duration-300, ease-in-out) for hover and focus states, and you can cover most micro-interactions without touching a plugin. You can explore all of these utilities in the official Tailwind animation documentation.
When built-ins are enough: loaders, skeletons, badges, and basic hover transitions.
When to Reach for a Tailwind Animation Plugin
The built-in set has limits. It doesn’t include enter/exit animations, directional slides, flips, or scroll-triggered reveals. That’s where Tailwind animation plugins earn their place.
tailwindcss-animate
tailwindcss-animate adds composable enter and exit utilities:
<!-- Fade and zoom in on mount -->
<div class="animate-in fade-in zoom-in duration-300">...</div>
<!-- Slide out to the top on dismiss -->
<div class="animate-out slide-out-to-top fade-out duration-200">...</div>It also exposes fine-grained controls—delay-150, repeat-infinite, fill-mode-forwards, direction-alternate—that let you tune animations without writing custom CSS.
However, the plugin hasn’t seen a new release since 2023, so compatibility with newer Tailwind versions may vary depending on your setup. Some modern Tailwind v4 stacks instead use newer animation packages designed around the framework’s CSS-first architecture.
tailwind-animations
tailwind-animations takes a different approach: a large library of named animations (animate-fade-in, animate-shake, animate-heartbeat, animate-jelly, and many more).
<div class="animate-fade-in">
Fade in box
</div>The plugin also supports scroll-based animation utilities using the CSS animation-timeline property.
<!-- Reveal on scroll using CSS View Timeline -->
<div class="timeline-view animate-fade-in-up animate-range-gradual">...</div>These scroll-driven animations rely on newer browser features such as animation-timeline, so browser support may vary depending on your target audience.
Discover how at OpenReplay.com.
Tailwind CSS v4 and the CSS-First Approach
If you’re on Tailwind CSS v4, the recommended way to add custom animations is directly in your CSS using @theme:
@theme {
--animate-wiggle: wiggle 1s ease-in-out infinite;
@keyframes wiggle {
0%, 100% { transform: rotate(-3deg) }
50% { transform: rotate(3deg) }
}
}This makes animate-wiggle available as a utility class immediately—no plugin required. For one-off custom animations, this is often cleaner than installing a dependency.
Compatibility note: Some plugins were built for Tailwind v3 and may not fully support v4’s CSS-first architecture. Always check a plugin’s repository or documentation before adding it to a v4 project.
Don’t Forget Accessibility
Wrap any non-essential animation in motion-safe: so users who prefer reduced motion aren’t affected:
<svg class="motion-safe:animate-spin ...">...</svg>Tailwind’s motion-reduce: variant works the other way—applying styles only when reduced motion is preferred. Use both to give every user a comfortable experience.
Choosing Your Approach
| Need | Solution |
|---|---|
| Loader, skeleton, badge | Built-in animate-* utilities |
| Enter/exit, modal, toast | tailwindcss-animate |
| Rich named animations, scroll reveals | tailwind-animations |
| One-off custom animation | @theme in CSS (v4) or theme.extend.keyframes (v3) |
Conclusion
Start with what Tailwind already provides. The four built-in animation utilities and the transition classes handle most everyday micro-interactions. When you need enter/exit sequences, directional slides, or scroll-triggered reveals, a plugin like tailwindcss-animate or tailwind-animations can slot in cleanly. If you’re on v4, try defining custom animation tokens in CSS before reaching for a package at all. Whichever path you choose, remember to respect the prefers-reduced-motion media query so every user gets a comfortable experience.
FAQs
The plugin was originally built for Tailwind v3 and hasn't seen a new release since 2023. Compatibility with Tailwind v4 depends on the project setup, so check the plugin repository before using it in a v4 project. Many of its animations can also be recreated directly using the v4 @theme directive.
In Tailwind v4, define a custom animation token inside a @theme block in your CSS file using a --animate- variable and a corresponding @keyframes rule. In v3, extend theme.extend.keyframes and theme.extend.animation in your tailwind.config.js. Both approaches make the animation available as a standard utility class.
Transition utilities like transition, duration, and ease control property changes between two states, such as hover or focus. Animation utilities like animate-spin run keyframe-based sequences that can loop, reverse, or play once. Use transitions for simple state changes and animations for continuous or multi-step motion.
CSS-based animations in Tailwind are generally performant because they run on the compositor thread when animating transform and opacity. Avoid animating layout properties like width or height. Scroll-triggered animations using the CSS animation-timeline feature can also be efficient, but browser support should be verified before relying on them in production.
Gain Debugging Superpowers
Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.
