Tailwind Animation Generator
Use built-in Tailwind animations or create custom ones.
Copy classes or tailwind.config.js code instantly.
Continuous rotation for loading spinners
animate-spinBuilt-in Tailwind Animations
animate-spin
Continuous 360-degree rotation. Perfect for loading spinners and refresh icons.
animate-ping
Scale and fade out effect like a radar ping. Great for notification badges and attention indicators.
animate-pulse
Gentle opacity fade in and out. Ideal for skeleton loaders and placeholder content.
animate-bounce
Bouncing motion with easing. Great for scroll-down indicators and call-to-action buttons.
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow