Transition Utilities
Enable CSS transitions with transition-*, choose which properties animate with transition-colors, transition-transform, and transition-all.
Why CSS Transitions Matter
CSS transitions make state changes smooth and feel intentional rather than abrupt. When a button changes background color on hover, a sidebar slides in, or an input gets a focus ring, transitions communicate to users that something happened and guide their attention. Tailwind's transition utilities let you add these animations with a single class — no custom CSS required for the most common use cases.
The transition Utility
The base transition utility enables CSS transitions for the most commonly animated properties: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, and filter. Adding just transition to a button is usually enough to make hover color changes animate smoothly.
<!-- Simple hover transition on a button -->
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
Hover Me
</button>
<!-- The transition class enables smooth color changes -->
<!-- Without it, the color snaps instantly on hover -->
<!-- With it, the background color animates over 150ms (Tailwind default) -->All lessons in this course
- Transition Utilities
- Duration and Easing
- Built-In Keyframe Animations
- Custom Animations in Config