Effects
Transitions
Transitions smoothly animate changes (like a hover color) instead of snapping instantly. Add transition, then optionally control duration and easing.
Making hovers smooth
Add transition (or transition-colors, transition-transform) to the element. duration-300 sets 300ms; ease-in-out sets the timing curve.
Example
<div class="flex gap-4">
<button class="bg-sky-600 hover:bg-sky-800 text-white px-4 py-2 rounded-lg transition duration-300">Smooth</button>
<button class="bg-slate-600 hover:bg-slate-800 text-white px-4 py-2 rounded-lg">Instant</button>
</div>💡
Pair transition with transform utilities (like hover:scale-105) for lift and zoom effects.