Tailwind Animation Generator
Pick, customize, and preview Tailwind CSS animations visually.
- Home
- > Tailwind >
- Animation Generator
Animation
Preview
A
tailwind.config.js (animation + keyframes)
HTML Usage
How to Use
- Choose a built-in animation (Spin, Ping, Pulse, Bounce) or create Custom Keyframes.
- Adjust duration, delay, and easing to fine-tune the animation.
- Preview the animation live in the preview box.
- Copy the generated
tailwind.config.jscode and HTML usage.
Frequently Asked Questions
How do I add the animation to my project?
Copy the generated tailwind.config.js code into your Tailwind config's theme.extend.animation and theme.extend.keyframes sections. Then use the class animate-{name} in your HTML.
Can I create my own keyframes?
Yes. Select "Custom Keyframes" from the animation type dropdown, then enter your own @keyframes CSS in the text area and give it a name.
What Tailwind versions are supported?
The generated config works with Tailwind CSS v3 and v4. The animate- utility classes and keyframes configuration are compatible across both versions.
