prefers-reduced-motion and the motion-safe Variant

Accessible Animations

Some users have vestibular disorders or simply prefer less motion. The OS-level prefers-reduced-motion: reduce media query signals this preference. Tailwind surfaces it through two variants.

• motion-safe: — applies the utility only when the user has NOT requested reduced motion.
• motion-reduce: — applies the utility only when the user HAS requested reduced motion.

The Right Pattern

The recommended approach is to add transitions and animations behind motion-safe:, so they are silently omitted for users who prefer reduced motion. Never add animation classes unconditionally and then try to undo them with motion-reduce:.

<!-- Good: animation is opt-in for users who allow motion -->
<button
  class="rounded-lg bg-sky-600 px-5 py-2 text-white
         hover:bg-sky-700
         motion-safe:transition-colors motion-safe:duration-200"
>
  Hover me
</button>

<!-- Skeleton loader: pulse only when motion is allowed -->
<div class="h-4 w-48 rounded bg-slate-200 motion-safe:animate-pulse"></div>

Disabling Built-In Animations Gracefully

<div class="animate-spin motion-reduce:animate-none size-6 rounded-full border-4
            border-sky-500 border-t-transparent">
</div>