tailwindcss-transforms_skill

Overview

This skill provides a compact, practical reference for Tailwind CSS v4.1 utilities that control transforms, transitions, and animations. It organizes scale, rotate, translate, skew, transform-origin, transition properties, durations, easing, delays, built-in animations, and custom @keyframes into easy-to-use examples. Use it to apply responsive, state-driven motion with performance and accessibility in mind.

How this skill works

The skill lists utility classes and short code examples showing how each transform, transition, and animation utility maps to CSS behavior. It explains responsive and state variants (hover, focus, group-hover) and shows how to combine transforms with transition and animation utilities. It also documents custom @keyframes patterns and provides accessibility and performance guidance for real projects.

When to use it

• Add subtle UI motion (hover, focus) to improve perceived responsiveness
• Create loaders, attention cues, and repeated animations (spin, ping, pulse)
• Animate entrance/exit with custom keyframes (slideIn, fadeIn, scaleIn)
• Stagger list or grid animations using delay utilities
• Optimize heavy motion to respect prefers-reduced-motion

Best practices

• Always pair transition property utilities with duration utilities for predictable results
• Prefer transform and opacity for performant animations instead of layout properties
• Use easing (ease-out, ease-in-out) to create natural motion
• Apply mobile-first classes and add responsive variants for larger screens
• Respect prefers-reduced-motion and provide non-animated fallbacks

Example use cases

• Button hover scale with transition: scale-100 hover:scale-110 transition duration-200 ease-out
• Spinning loader SVG: animate-spin on svg element with size classes
• Staggered list appearance: animate-pulse on items with delay-0/150/300 for sequential effect
• Complex entry animation: combine translate, rotate, scale with transition-transform duration-500 ease-in-out
• Origin-based scaling for directional effects: origin-bottom scale-100 hover:scale-150 transition-transform duration-300