Tailwindcss Animations
Add Tailwind v4-style theme keyframe animations and transition utilities without hand-rolling inconsistent CSS motion.
Overview
tailwindcss-animations is an agent skill for the Build phase that supplies Tailwind CSS @theme keyframe patterns and transition utilities for web UI motion.
Install
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill tailwindcss-animationsWhat is this skill?
- Defines @theme custom animations: fade-in/out, slide-up/down, scale-in, and slow spin via CSS keyframes.
- Shows usage with animate-* utilities on HTML elements for enter/exit patterns.
- Documents transition-* utilities for colors, transform, and opacity with duration control.
- Provides copy-paste keyframe blocks for common marketing and dashboard micro-interactions.
- Covers fade-in/out, slide-up/down, scale-in, and spin-slow @theme animation presets
Adoption & trust: 1.8k installs on skills.sh; 42 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want polished fade, slide, and scale effects in Tailwind but keep reinventing keyframes or overusing transition-all.
Who is it for?
Solo builders using Tailwind who need fast, consistent micro-animations on marketing pages and SaaS UI.
Skip if: Native mobile gesture systems or heavy physics-based motion that needs a dedicated animation runtime.
When should I use this skill?
When implementing Tailwind CSS enter/exit animations, @theme keyframes, or transition utilities on web UI.
What do I get? / Deliverables
You get ready-made @theme animation definitions and class usage patterns agents can apply uniformly across components.
- @theme animation token definitions
- Component markup using animate-* and transition-* classes
Recommended Skills
Frontend Designanthropics/skills
Vercel React Best Practicesvercel-labs/agent-skills
Remotion Best Practicesremotion-dev/skills
Vercel Composition Patternsvercel-labs/agent-skills
Develop Userscriptsxixu-me/skills
Next Best Practicesvercel-labs/next-skills
Journey fit
How it compares
Tailwind utility patterns for CSS motion, not Disney-style native touch or React Spring orchestration.
Common Questions / FAQ
Who is tailwindcss-animations for?
Developers building web UIs with Tailwind CSS who want agents to generate standard keyframe and transition utilities instead of ad-hoc CSS.
When should I use tailwindcss-animations?
During Build (frontend) when adding modals, hero sections, cards, or buttons that need fade-in, slide-up, scale-in, or property-specific transitions.
Is tailwindcss-animations safe to install?
It is documentation-style patterns only; check the Security Audits panel on this page before installing skills from the marketplace.
SKILL.md
READMESKILL.md - Tailwindcss Animations
# Tailwind CSS Animation Patterns ## CSS Keyframe Animations ### Defining Custom Animations ```css @theme { /* Animation definitions */ --animate-fade-in: fade-in 0.3s ease-out; --animate-fade-out: fade-out 0.3s ease-out; --animate-slide-up: slide-up 0.4s ease-out; --animate-slide-down: slide-down 0.4s ease-out; --animate-scale-in: scale-in 0.2s ease-out; --animate-spin-slow: spin 3s linear infinite; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes slide-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } ``` ### Usage ```html <div class="animate-fade-in">Fades in</div> <div class="animate-slide-up">Slides up</div> <div class="animate-scale-in">Scales in</div> ``` ## Transition Utilities ### Transition Properties ```html <!-- Specific properties (recommended) --> <button class="transition-colors duration-200">Color transition</button> <button class="transition-transform duration-200">Transform transition</button> <button class="transition-opacity duration-200">Opacity transition</button> <button class="transition-shadow duration-200">Shadow transition</button> <!-- Multiple properties --> <button class="transition-[color,transform] duration-200">Custom</button> <!-- All properties (use sparingly - performance impact) --> <button class="transition-all duration-200">All properties</button> ``` ### Duration Scale ```html <div class="transition duration-75">75ms</div> <div class="transition duration-100">100ms</div> <div class="transition duration-150">150ms (default)</div> <div class="transition duration-200">200ms</div> <div class="transition duration-300">300ms</div> <div class="transition duration-500">500ms</div> <div class="transition duration-700">700ms</div> <div class="transition duration-1000">1000ms</div> ``` ### Timing Functions ```html <div class="transition ease-linear">Linear</div> <div class="transition ease-in">Ease in</div> <div class="transition ease-out">Ease out (recommended)</div> <div class="transition ease-in-out">Ease in-out</div> <!-- Custom cubic-bezier --> <div class="transition ease-[cubic-bezier(0.68,-0.55,0.265,1.55)]"> Bouncy </div> ``` ### Delay ```html <div class="transition delay-75">75ms delay</div> <div class="transition delay-100">100ms delay</div> <div class="transition delay-150">150ms delay</div> <div class="transition delay-200">200ms delay</div> <div class="transition delay-300">300ms delay</div> ``` ## Interactive Animations ### Hover Effects ```html <!-- Scale on hover --> <div class="transition-transform duration-200 hover:scale-105"> Grows on hover </div> <!-- Lift effect --> <div class="transition-all duration-200 hover:-translate-y-1 hover:shadow-lg"> Lifts on hover </div> <!-- Color shift --> <button class=" bg-blue-600 text-white transition-colors duration-200 hover:bg-blue-700 "> Button </button> <!-- Multi-property --> <div class=" transition-all duration-300 hover:scale-105 hover:shadow-xl hover:bg-gray-50 "> Complex hover </div> ``` ### Focus Effects ```html <input class=" border border-gray-300 transition-all duration-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none " /> <button class=" transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 "> Accessible focus </button> ``` ### Active States ```html <button class=" transition-transform duration-100 active:scale-95 "> Press effect </button> ``` ## Group Animations ### Group Hover ```html <div cla