# tailwindcss-animations
A Tailwind CSS skill covering built-in animation utilities, custom keyframes, transitions, reduced-motion and Framer Motion.
- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2400 installs · ★ 59
- Author: JosiahSiegel
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/JosiahSiegel/claude-plugin-marketplace/tree/HEAD/plugins/tailwindcss-master/skills/tailwindcss-animations/SKILL.md
- Updated: 2026-06-18
- HTML: https://affpapa.org/en/nevibecode/skills/tailwindcss-animations
## What it does
The skill activates when animation work shows up in a Tailwind project: `animate-*` classes, transitions, transforms, or Framer Motion wiring. It carries a reference for the built-in utilities (`animate-spin`, `animate-ping`, `animate-pulse`, `animate-bounce`), tables for `transition-*`, `duration-*`, `ease-*` and `delay-*`, plus transform examples for `scale`, `rotate`, `translate`, `skew` and `origin`.
Custom animations get their own section for Tailwind v4: declare `--animate-fade-in` inside `@theme`, then write the matching `@keyframes` for `fade-in`, `slide-up` or `shake`. Custom easing comes as `cubic-bezier` values, and accessibility is handled with `motion-safe:` / `motion-reduce:` variants and a global `prefers-reduced-motion: reduce` rule.
Everything here targets Tailwind v4, so the `@theme` examples won't work in a v3 codebase — that version declares animations differently. Install is one `npx skills add` command, and the skill file lands in your platform's skills directory.
## Install
### Claude Code (native platform)
1. **Skills CLI (Vercel)**
```bash
npx skills add JosiahSiegel/claude-plugin-marketplace --skill tailwindcss-animations -a claude-code
```
2. **Manually: put the files in place**
- File: `~/.claude/skills/tailwindcss-animations/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/tailwindcss-animations/
### Codex
1. **Skills CLI (Vercel)**
```bash
npx skills add JosiahSiegel/claude-plugin-marketplace --skill tailwindcss-animations -a codex
```
2. **Manually: put the files in place**
- File: `.agents/skills/tailwindcss-animations/SKILL.md` — For all projects use ~/.agents/skills/
### Cursor
1. **Skills CLI (Vercel)**
```bash
npx skills add JosiahSiegel/claude-plugin-marketplace --skill tailwindcss-animations -a cursor
```
2. **Manually: put the files in place**
- File: `.cursor/skills/tailwindcss-animations/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/
### GitHub Copilot
1. **GitHub CLI**
```bash
gh skill install JosiahSiegel/claude-plugin-marketplace tailwindcss-animations
```
2. **Manually: put the files in place**
- File: `.github/skills/tailwindcss-animations/SKILL.md`
### Gemini CLI
1. **Skills CLI (Vercel)**
```bash
npx skills add JosiahSiegel/claude-plugin-marketplace --skill tailwindcss-animations -a gemini-cli
```
2. **Platform CLI**
```bash
gemini skills install https://github.com/JosiahSiegel/claude-plugin-marketplace --path plugins/tailwindcss-master/skills/tailwindcss-animations
```
### Windsurf (Devin Desktop)
**Manually: put the files in place**
- File: `.devin/skills/tailwindcss-animations/SKILL.md` — The legacy .windsurf/skills/ path still works
### OpenCode
**Skills CLI (Vercel)**
```bash
npx skills add JosiahSiegel/claude-plugin-marketplace --skill tailwindcss-animations -a opencode
```
### Claude.ai
**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills
Where a file is given instead of a command, copy the files from the source to that path: https://github.com/JosiahSiegel/claude-plugin-marketplace/tree/HEAD/plugins/tailwindcss-master/skills/tailwindcss-animations/SKILL.md
## When to use it
- add a loading spinner with `animate-spin`
- make a card lift on hover
- declare a custom animation with `@keyframes` and `@theme`
- disable motion for users who asked for reduced motion
- wire Framer Motion into a Tailwind project
## Example prompts
- add an `animate-pulse` skeleton loader to the card list
- write a slide-up entrance animation using `@theme` and `@keyframes`
- wrap the hover transitions in `motion-safe:` so reduced motion still works
## Source text · SKILL.md · MIT
Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 40d6e4916f7db9f0.
BEGIN THIRD-PARTY FILE 40d6e4916f7db9f0
````text
---
name: tailwindcss-animations
description: |
Tailwind CSS animations and transitions including built-in utilities and custom keyframes.
PROACTIVELY activate for: (1) animate-* utilities (spin, ping, pulse, bounce), (2) custom @keyframes via @theme animate, (3) transition utilities (transition, duration, ease), (4) transforms (scale, rotate, translate) with transition, (5) prefers-reduced-motion: reduce, (6) Framer Motion / Motion One integration with Tailwind, (7) CSS scroll-driven animations (animation-timeline), (8) view transitions API with Tailwind, (9) hover, focus, group-hover transitions, (10) staggered list animations.
Provides: animation utility reference, custom keyframe examples, reduced-motion pattern, Framer Motion integration, and scroll-driven animation recipes.
---
# Tailwind CSS Animations & Transitions
## Built-in Animations
### Spin
Continuous rotation for loading indicators:
```html
```
### Ping
Radar-style pulse for notifications:
```html
```
### Pulse
Subtle fade for skeleton loaders:
```html