Animation-Cheat-Sheet for Tailwind CSS
Abhi Ranganathan
September 12, 2025 • 10 min read
Tailwind CSS makes it easy to add beautiful animation effects to your websites. This guide shows how to use and customize animations to create a wow factor in your designs with just a few utility classes.
Why Use Animation?
Thoughtful animation can make a website feel more interactive and polished. With Tailwind's built-in animation utilities, you can add animations like fades, transitions, and hovers with simple, semantic classes that match your utility-first workflow.
Some of our most popular utilities:
hover:animate-pulsetransition-opacity duration-300animate-spinfocus:animate-wiggle
Getting Started
Install a standard Tailwind project:
npx create-next-app@latest tailwind-animation
cd tailwind-animation
npm install tailwindcss
Add the Tailwind directives to your globals.css file:
/* ./style/globals.css */
@tailwindcss
/* Your Tailwind directives can be added here */
Customizing Your Transitions
Here are some ways to customize your animations:
// ./tailwind.config.js
module.exports = {
theme: {
extend: {
animation: {
// Add custom animations
'spin-slow': 'spin 10s linear infinite',
'pulse-glow': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
transitionDuration: {
// Control animation speed
'300': '300ms',
'800': '800ms',
},
transitionDelay: {
// Control delays
'300': '300ms
},
},
},
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
Available Animation Classes
| Class | Description |
|---|---|
| animate-bounce | Bouncy animation for playful interactions |
| hover:animate-jump | Jump on hover for buttons and icons |
| animate-pulse | Gentle fade for focus or loading |
| animate-spin | Continuous rotate (Great for loading indicators) |
| animate-wavvle | Gentle shake for errors |
Animation Example
Hover Transition Box
Hover Me!
This box will scale up on hover and increase its shadow.
Button with Delayed Fade
Interactive Dark Mode
Use this to add dark mode switching in your sites:
const DarkModeButton = () => (
);
Experiment with Animations!
Use these utilities to explore what's possible with Tailwind css.