Effects
Animations
Tailwind ships a few ready-made keyframe animations for common needs like spinners, loading skeletons and attention pings.
The built-in animations
| Class | Use |
|---|---|
| animate-spin | Loading spinners |
| animate-pulse | Skeleton placeholders |
| animate-bounce | Scroll hints / attention |
| animate-ping | Notification dots |
Example
<div class="flex items-center gap-6">
<div class="w-8 h-8 border-4 border-sky-500 border-t-transparent rounded-full animate-spin"></div>
<div class="space-y-2">
<div class="h-3 w-40 bg-slate-200 rounded animate-pulse"></div>
<div class="h-3 w-24 bg-slate-200 rounded animate-pulse"></div>
</div>
</div>💡
For custom animations, define keyframes in your tailwind.config.js under theme.extend.animation and keyframes.