Tailwind CSS is a CSS framework that helps in building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. In Tailwind CSS, motion-safe and motion-reduce are utility classes used for creating animations. motion-safe ensures animations play regardless of user preferences, while motion-reduce scales back or disables animations for users who prefer reduced motion, creating more inclusive experiences. In this article, we’ll see how to use motion-safe and motion-reduce in Tailwind CSS.

Motion Utilities in Tailwind CSS:

• motion-safe: It ensures that animations play during page load, regardless of the user’s preference for reduced motion.
• motion-reduce: It is used to tone down the intensity of animations for users who prefer fewer distractions or have motion sensitivity.

Syntax:

// motion-safe
<button class="motion-safe:animate-pulse">
    . . .
</button>

// motion-reduce
<div class="motion-reduce:transition duration-500">
    . . .
</div>

Example 1: Below example demonstrates the usage of motion-safe utility.

Output:

Example 2: Below example demonstrates the usage of motion-reduce.

Output: