animationsTailwind
Tailwind motion-safe/motion-reduce Variants
MUST
MUST: Use Tailwind `motion-safe:` and `motion-reduce:` variants to conditionally apply animations. Default pattern: `motion-safe:animate-*` ensures animations only run when user allows motion.
Use Tailwind motion-safe: and motion-reduce: variants for accessible animations
Bad
Good
Why it matters
These variants respect the user's prefers-reduced-motion setting. motion-safe: applies styles only when motion is allowed. motion-reduce: applies alternative styles when user prefers reduced motion.