prefers-reduced-motion as a variant.

Example#

html
<div class="motion-safe:animate-bounce">Respects user motion preference</div>

Stacking#

Prefix order is screens → variants → utility. These variants combine with every screen (sm: md: lg: xl:…) and with each other.

Best practices#

  • Gate ALL animations behind motion-safe:
  • motion-reduce:transition-none kills transitions globally

variants/index|Variants hub · responsive/index|Responsive · utilities/index|Utilities