Tailwind Animation Generator

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.