Tailwindcss Animations

A comprehensive reference for Tailwind's animation system, covering the built-in utilities (spin, ping, pulse, bounce) and how to wire up custom keyframes in v4's @theme directive. Includes transition properties, durations, and easing functions with real examples like hover card lifts and button press effects. The accessibility section is genuinely useful, showing both motion-safe/motion-reduce variants and the global reduced motion pattern. Also covers transform utilities (scale, rotate, translate) with proper origin controls. This is the kind of reference you keep open when you're building interactive UIs and need to remember whether it's transition-transform or transition-all, or how to set up staggered animations without fighting the framework.

skills.sh installs: 2.4K
GitHub stars: 61
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add josiahsiegel/claude-plugin-marketplace --skill tailwindcss-animations --agent claude-code

Installs into .claude/skills of the current project.

Files

Tailwind CSS Animations & Transitions

Built-in Animations

Spin

Continuous rotation for loading indicators:

<svg class="animate-spin h-5 w-5 text-blue-500" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
</svg>

Ping

Radar-style pulse for notifications:

<span class="relative flex h-3 w-3">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></span>
</span>

Pulse

Subtle fade for skeleton loaders:

<div class="animate-pulse flex space-x-4">
  <div class="rounded-full bg-slate-200 h-10 w-10"></div>
  <div class="flex-1 space-y-2 py-1">
    <div class="h-2 bg-slate-200 rounded"></div>
    <div class="h-2 bg-slate-200 rounded w-5/6"></div>
  </div>
</div>