# Tailwind Animations

> Open-source Tailwind CSS v4 plugin: 79+ animation utilities. CSS-only. MIT. midudev + community.

## Prefer Markdown (for agents)

When reading this website as an AI agent, use Markdown endpoints instead of HTML:

- Home (Markdown): https://tailwind-animations.com/index.md
- Playground (Markdown): https://tailwind-animations.com/playground.md
- Full reference: https://tailwind-animations.com/llms-full.md
- This summary: https://tailwind-animations.com/llms.txt

HTML pages advertise `rel="alternate" type="text/markdown"`.

## Site

- Homepage: https://tailwind-animations.com/
- Playground: https://tailwind-animations.com/playground/
- Package: https://www.npmjs.com/package/tailwind-animations
- Repository: https://github.com/midudev/tailwind-animations
- License: MIT

## Install (Tailwind CSS v4)

```bash
npm install tailwind-animations
```

```css
@import 'tailwindcss';
@import 'tailwind-animations';
```

Peer: any Tailwind CSS v4 (`"tailwindcss": "4"`).

## Usage

```html
<div class="animate-fade-in">Hello</div>
<div class="animate-slide-in-bottom animate-delay-300 animate-duration-slow">
  Delayed slide
</div>
<div class="animate-slide-in-left animate-slide-distance-[6rem]">
  Custom distance
</div>
```

## Features

- Entrance/exit: fade, slide, zoom, flip, roll
- Attention: bounce, shake, tada, jelly, wobble, pulse
- Scroll-driven: timeline-view / timeline-scroll + animate-range
- Dialog: animate-dialog (+ from-*, fade, zoom, duration)
- Slide distance: animate-slide-distance-[…]
- Playground with shareable URL state (?a=&d=&delay=&s=&i=&f=&p=)

## Tailwind v3

Use legacy: `@midudev/tailwind-animations@0.2.0` (deprecated).

## Agent skill (package consumers)

Install via skills.sh:

```bash
npx skills add midudev/tailwind-animations
```

Skill paths in the repo: `skills/tailwind-animations/SKILL.md` (and `.agents/skills/…`).