motion-safe / motion-reduce

Why

Windows, macOS, iOS, and Android expose a “Reduce motion” accessibility toggle. Tailwind’s motion-safe: and motion-reduce: variants let you honor that preference without writing a single media query by hand.

The classes

Recipe

Wrap every animated utility in motion-safe:. Provide a static fallback with motion-reduce:.

<div class="motion-safe:animate-fade-in
            motion-safe:opacity-0
            motion-reduce:opacity-100">
  Content
</div>

Tailwind config

Define custom keyframes so animate-fade-in is available.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        "fade-in": {
          "0%":   { opacity: "0" },
          "100%": { opacity: "1" },
        },
      },
      animation: {
        "fade-in": "fade-in 0.4s ease-out",
      },
    },
  },
};