tailwindcss-animations

SKILL.md

Tailwind CSS utilities for animations, transitions, and transforms with built-in patterns and custom animation support.

Four built-in animations (spin, ping, pulse, bounce) plus extensive transition utilities covering properties, duration, timing functions, and delays

Transform utilities for scale, rotate, translate, and skew with configurable origin points and GPU-accelerated performance

Custom animations via @theme in Tailwind v4, including keyframe definitions and custom easing curves

Accessibility support through motion-safe and motion-reduce variants that respect user motion preferences

Common patterns documented including hover effects, loading states, skeleton loaders, and scroll-triggered animations

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: