Tailwind Animations

tailwind-animations (consumer skill)

Help the user use the tailwind-animations package in their app. This skill is not for contributing to the plugin monorepo.

Package: CSS-only utilities for Tailwind CSS v4 (peer: any tailwindcss@4).
Site / demos: https://tailwind-animations.com
Playground (compose + share URL): https://tailwind-animations.com/playground/
Agent docs (prefer Markdown): https://tailwind-animations.com/llms-full.md

When to apply

• Adding entrance/exit/attention animations with Tailwind classes
• Configuring tailwind-animations after npm install
• Animating native <dialog> open/close
• Scroll- or view-driven CSS animations
• Fading edges of overflow/scroll containers (scroll-mask-*)
• Customizing slide distance, duration, delay, steps, iteration, fill mode

Install in the consumer project

npm install tailwind-animations
# pnpm add tailwind-animations
# yarn add tailwind-animations

/* globals.css / app.css — Tailwind v4 */
@import "tailwindcss";
@import "tailwind-animations";

Requirements: Tailwind CSS v4.
Legacy Tailwind v3: @midudev/tailwind-animations@0.2.0 (deprecated; different API).

Do not register a JS plugin. The package is pure CSS.

Core usage

Prefix animation names with animate-:

<div class="animate-fade-in">Hello</div>

<div class="animate-slide-in-bottom animate-delay-300 animate-duration-slow">
  Slow delayed entrance
</div>

<div class="animate-slide-in-left animate-slide-distance-[6rem]">
  Custom travel distance
</div>

Compose modifiers

Dialog (native <dialog>)

<button type="button" commandfor="demo" command="show-modal">Open</button>

<dialog
  id="demo"
  class="animate-dialog animate-dialog-from-top animate-dialog-duration-fast m-auto max-w-lg rounded-2xl p-6"
>
  <p>Content</p>
  <button type="button" commandfor="demo" command="request-close">Close</button>
</dialog>

Also: animate-dialog-fade, animate-dialog-zoom, animate-dialog-from-bottom|left|right, animate-dialog-duration-*.

Scroll / view timelines

<div class="timeline-scroll animate-rotate-360">Rotates while scrolling</div>

<div class="animate-zoom-in timeline-view animate-range-entry">
  Plays as it enters the viewport
</div>

Scroll mask (fade overflow edges)

Pure CSS edge fades driven by animation-timeline: scroll(). Apply on the scroll container (needs overflow).

<!-- Vertical list: fade top & bottom by scroll position -->
<ul class="scroll-mask-y max-h-64 overflow-y-auto">…</ul>

<!-- Horizontal chips -->
<div class="scroll-mask-x flex overflow-x-auto">…</div>

<!-- Single edge or custom opaque-stop (mirrors Tailwind mask-from) -->
<div class="scroll-mask-b-from-80% overflow-y-auto">…</div>
<div class="scroll-mask-x-from-90% overflow-x-auto">…</div>
<div class="scroll-mask-r-from-[calc(100%-2rem)] overflow-x-auto">…</div>

Default fade stop is 80% (opaque until 80%, then transparent at the edge). Requires browser support for animation-timeline: scroll().

Animation catalog (79)

Use as animate-{name}:

blink, blurred-fade-in, bounce-fade-in, bouncing, contract-horizontally, contract-vertically, dancing, expand-horizontally, expand-vertically, fade-in, fade-in-down, fade-in-left, fade-in-right, fade-in-up, fade-out, fade-out-down, fade-out-left, fade-out-right, fade-out-up, flash, flip-horizontal, flip-in-x, flip-in-y, flip-out-x, flip-out-y, flip-vertical, flip-x, flip-y, float, hang, heartbeat, horizontal-bounce, horizontal-vibration, impulse-rotation-left, impulse-rotation-right, jelly, jiggle, jump, pop, pulse, pulse-fade-in, pulsing, roll-in, roll-out, rotate-180, rotate-360, rotate-90, rotate-in, rotate-out, rotational-wave, rubber-band, scale, shake, sink, skew, skew-right, slide-in-bottom, slide-in-left, slide-in-right, slide-in-top, slide-out-bottom, slide-out-left, slide-out-right, slide-out-top, slide-rotate-in, slide-rotate-out, slide-up-fade, spin-clockwise, spin-counter-clockwise, squeeze, sway, swing, swing-drop-in, tada, tilt, vertical-bounce, wobble, zoom-in, zoom-out

Playground (for discovery)

https://tailwind-animations.com/playground/

Shareable query params: a (animation), d (duration), delay, s (steps), i (iteration), f (fill), p (preset: box|button|card|text).

Example:
https://tailwind-animations.com/playground/?a=jelly&d=700&delay=100&i=infinite&p=card

Agent reading of the docs site

Prefer Markdown over scraping HTML:

• https://tailwind-animations.com/index.md
• https://tailwind-animations.com/playground.md
• https://tailwind-animations.com/llms-full.md
• https://tailwind-animations.com/llms.txt

Best practices

1. Prefer transform + opacity animations (most of the catalog).
2. Treat blurred-fade-in (filter: blur) as heavier on mobile.
3. Infinite loops (pulse, horizontal-vibration, rotational-wave, …) keep motion running—use sparingly; respect prefers-reduced-motion in the host app.
4. Do not animate layout properties (width, height, top) when a transform utility exists.
5. Arbitrary values work with Tailwind: animate-duration-[1.2s], animate-slide-distance-[10rem].

Anti-patterns

• Installing a JS Tailwind plugin for this package (none exists in v1).
• Using latest package with Tailwind v3 (use @midudev/tailwind-animations@0.2.0 instead).
• Inventing class names not in the catalog without checking docs/playground.
• Confusing this skill with monorepo contributor workflows (out of scope).

Quick recipes

Staggered list entrance

<li class="animate-fade-in-up animate-delay-100">…</li>
<li class="animate-fade-in-up animate-delay-200">…</li>
<li class="animate-fade-in-up animate-delay-300">…</li>

Attention once

<span class="animate-tada animate-iteration-count-once">Saved!</span>

Modal

<dialog class="animate-dialog animate-dialog-zoom animate-dialog-duration-normal">…</dialog>

Scrollable panel with edge fade

<div class="scroll-mask-y max-h-80 overflow-y-auto rounded-xl border p-4">
  …
</div>