Best use case
Tailwind CSS Animations is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
## Overview
Teams using Tailwind CSS Animations should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/tailwind-animate/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How Tailwind CSS Animations Compares
| Feature / Agent | Tailwind CSS Animations | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
## Overview
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Tailwind CSS Animations
## Overview
Tailwind CSS includes animation utilities and the tailwindcss-animate plugin adds more. Create entrance animations, loading states, skeleton screens, and micro-interactions entirely with utility classes — no JavaScript needed for simple animations.
## Instructions
### Step 1: Built-in Animations
```tsx
// Tailwind includes 4 animations out of the box
<div className="animate-spin">⟳</div> // loading spinner
<div className="animate-ping">●</div> // notification dot
<div className="animate-pulse">Loading...</div> // skeleton placeholder
<div className="animate-bounce">↓</div> // scroll indicator
```
### Step 2: tailwindcss-animate Plugin
```bash
npm install tailwindcss-animate
```
```javascript
// tailwind.config.js
module.exports = {
plugins: [require('tailwindcss-animate')],
}
```
```tsx
// Entrance animations
<div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
Content fades and slides up
</div>
// Exit animations
<div className="animate-out fade-out slide-out-to-top-4 duration-300">
Content fades and slides away
</div>
// With delay and fill mode
<div className="animate-in fade-in delay-200 fill-mode-backwards">
Appears after 200ms delay
</div>
// Staggered children (combine with CSS custom properties)
{items.map((item, i) => (
<div
key={item.id}
className="animate-in fade-in slide-in-from-bottom-2 duration-300 fill-mode-backwards"
style={{ animationDelay: `${i * 100}ms` }}
>
{item.name}
</div>
))}
```
### Step 3: Custom Animations
```javascript
// tailwind.config.js — Custom keyframes
module.exports = {
theme: {
extend: {
keyframes: {
'slide-up': {
'0%': { transform: 'translateY(10px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
shimmer: {
'0%': { backgroundPosition: '-200% 0' },
'100%': { backgroundPosition: '200% 0' },
},
},
animation: {
'slide-up': 'slide-up 0.3s ease-out',
shimmer: 'shimmer 2s infinite linear',
},
},
},
}
```
```tsx
// Skeleton loading with shimmer
<div className="h-4 w-48 rounded bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200 bg-[length:200%_100%] animate-shimmer" />
```
## Guidelines
- Use CSS animations for simple effects (fade, slide, spin) — no JS overhead.
- `tailwindcss-animate` pairs well with shadcn/ui — it powers dialog/dropdown animations.
- `fill-mode-backwards` applies initial state during delay — prevents flash of final state.
- Prefer `duration-300` (300ms) for most UI transitions — feels responsive without rushing.
- Use `prefers-reduced-motion` media query: `motion-reduce:animate-none`.Related Skills
tailwind-class-optimizer
Tailwind Class Optimizer - Auto-activating skill for Frontend Development. Triggers on: tailwind class optimizer, tailwind class optimizer Part of the Frontend Development skill category.
tailwind-design-system
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
flutter-animations
Comprehensive guide for implementing animations in Flutter. Use when adding motion and visual effects to Flutter apps: implicit animations (AnimatedContainer, AnimatedOpacity, TweenAnimationBuilder), explicit animations (AnimationController, Tween, AnimatedWidget/AnimatedBuilder), hero animations (shared element transitions), staggered animations (sequential/overlapping), and physics-based animations. Includes workflow for choosing the right animation type, implementation patterns, and best practices for performance and user experience.
tailwind-v4-shadcn
Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Prevents 8 documented errors. Use when initializing React projects with Tailwind v4, or fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, v3 migration issues.
expo-tailwind-setup
Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
figma-to-tailwind
Figma MCPで取得したデザイン変数をTailwind CSS標準クラスに変換する。Figma MCPのコード生成後やデザイン実装時に自動起動。
gsap-animations
GSAP animation best practices for web design - scroll triggers, performance optimization, accessibility, responsive animations, and testing integration. Use when implementing or reviewing animations on WordPress or any web project.
tailwind-css-v4-mastery
Expert guidance for leveraging Tailwind CSS V4's new Oxide engine, CSS-first configuration, and modern styling paradigms. This skill transforms Claude into a Tailwind V4 architecture specialist, capable of designing component systems, optimizing performance, and executing complex styling challenges with precision.
tailwind-css
Use when styling UI components or layouts with Tailwind CSS - mobile-first design, responsive utilities, custom themes, or component styling. NOT when plain CSS, CSS-in-JS (styled-components), or non-Tailwind frameworks are involved. Triggers: "style component", "responsive design", "mobile-first", "dark theme", "tailwind classes", "dashboard grid".
tailwind-patterns
Quick reference for Tailwind CSS utility patterns, responsive design, and configuration. Triggers on: tailwind, utility classes, responsive design, tailwind config, dark mode css, tw classes.
Tailwind CSS — Utility-First CSS Framework
You are an expert in Tailwind CSS v4, the utility-first CSS framework. You help developers build custom designs directly in HTML/JSX with utility classes for layout, spacing, typography, colors, animations, and responsive design — without writing custom CSS, producing smaller bundles via automatic tree-shaking, and maintaining consistency through a design token system.
tailwind-4
Tailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind - cn(), theme variables, no var() in className.