Transitions & Transforms in Tailwind CSS
From the Tailwind CSS cheat sheet · Transitions & Animations · verified Jul 2026
Transitions & Transforms
Animate property changes and transform elements.
html
<!-- Transition on hover -->
<button class="transition-colors duration-200 hover:bg-blue-600">
Smooth color change
</button>
<!-- Scale on hover -->
<div class="transition-transform duration-300 hover:scale-105">
Card
</div>
<!-- Transform -->
<div class="rotate-45">Rotated 45°</div>
<div class="translate-x-4">Moved right</div>💡 transition-colors is more performant than transition-all — specify what you animate
⚡ hover:-translate-y-1 + hover:shadow-lg creates the classic "lift on hover" card effect
📌 duration-200 to duration-300 feels natural for most UI transitions
🟢 active:scale-95 creates a satisfying press-down effect on buttons
transitionstransformsanimations
Continue with Tailwind CSS
Save the full cheat sheet or work through every related task.