Tailwind animate

Skill ComeOnOliver/skillshub/skills/TerminalSkills/skills/tailwind-animate

🧠 The right skill, one API call. AI agent skills registry with token-efficient skill resolution. 5,000+ skills from 500+ top repos.

Install

npx -y skills add ComeOnOliver/skillshub --skill tailwind-animate

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

2.7 KB, as published. Nobody here has run it

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

// 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

npm install tailwindcss-animate

// tailwind.config.js
module.exports = {
  plugins: [require('tailwindcss-animate')],
}

// 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

// 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',
      },
    },
  },
}

// 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.