Utilities for animating elements with CSS animations.
Add the animate-spin
utility to add a linear spin animation to elements like loading indicators.
<button type="button" class="bg-rose-600 ..." disabled>
<svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
<!-- ... -->
</svg>
Processing
</button>
Add the animate-ping
utility to make an element scale and fade like a radar ping or ripple of water — useful for things like notification badges.
<span class="flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-purple-500"></span>
</span>
Add the animate-pulse
utility to make an element gently fade in and out — useful for things like skeleton loaders.
<div class="border border-light-blue-300 shadow rounded-md p-4 max-w-sm w-full mx-auto">
<div class="animate-pulse flex space-x-4">
<div class="rounded-full bg-light-blue-400 h-12 w-12"></div>
<div class="flex-1 space-y-4 py-1">
<div class="h-4 bg-light-blue-400 rounded w-3/4"></div>
<div class="space-y-2">
<div class="h-4 bg-light-blue-400 rounded"></div>
<div class="h-4 bg-light-blue-400 rounded w-5/6"></div>
</div>
</div>
</div>
</div>
Add the animate-bounce
utility to make an element bounce up and down — useful for things like "scroll down" indicators.
<svg class="animate-bounce w-6 h-6 ...">
<!-- ... -->
</svg>
You can conditionally apply animations and transitions using the motion-safe
and motion-reduce
variants:
<button type="button" class="bg-indigo-600 ..." disabled>
<svg class="motion-safe:animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
<!-- ... -->
</svg>
Processing
</button>
These variants are not enabled by default, but you can enable them in the variants
section of your tailwind.config.js
file:
// tailwind.config.js
module.exports = {
// ...
variants: {
animation: ['responsive', 'motion-safe', 'motion-reduce']
}
}
Learn more in the state variants documentation.
To change or disable an animation at a specific breakpoint, add a {screen}:
prefix to any existing animation utility. For example, use md:animate-none
to apply the animate-none
utility at only medium screen sizes and above.
<div class="animate-spin md:animate-none ...">
<!-- ... -->
</div>
For more information about Tailwind's responsive design features, check out the Responsive Design documentation.
Animations by their very nature tend to be highly project-specific. The animations we include by default are best thought of as helpful examples, and you're encouraged to customize your animations to better suit your needs.
By default Tailwind provides utilities for four different example animations, as well as the animate-none
utility. You change, add, or remove these by customizing the animation
section of your theme configuration.
// tailwind.config.js
module.exports = {
theme: {
extend: {
animation: {
+ 'spin-slow': 'spin 3s linear infinite',
}
}
}
}
To add new animation @keyframes
, use the keyframes
section of your theme configuration:
// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: {
+ wiggle: {
+ '0%, 100%': { transform: 'rotate(-3deg)' },
+ '50%': { transform: 'rotate(3deg)' },
+ }
}
}
}
}
You can then reference these keyframes by name in the animation
section of your theme configuration:
// tailwind.config.js
module.exports = {
theme: {
extend: {
animation: {
+ wiggle: 'wiggle 1s ease-in-out infinite',
}
}
}
}
Learn more about customizing the default theme in the theme customization documentation.
By default, only responsive variants are generated for animation utilities.
You can control which variants are generated for the animation utilities by modifying the animation
property in the variants
section of your tailwind.config.js
file.
For example, this config will also generate hover and focus variants:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ animation: ['hover', 'focus'],
}
}
}
If you don't plan to use the animation utilities in your project, you can disable them entirely by setting the animation
property to false
in the corePlugins
section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ animation: false,
}
}