Motion, transitions and animations

Transitions

Utilities such as transition, duration utilities and easing utilities make state changes feel less abrupt. Only animate properties where the visual change helps users understand interaction.

Animations

Tailwind includes animation utilities and can be extended through theme variables and custom CSS. Avoid excessive motion because it can distract users and create accessibility issues.

Reduced motion

Respect users who prefer reduced motion. Use the motion-reduce: variant to disable or simplify non-essential animation.