How to use motion-safe and motion-reduce in Tailwind CSS ?

Last Updated : 02 Aug, 2023

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <title>Motion-Safe</title> 
    <script src= 
        "https://cdn.tailwindcss.com"> 
    </script> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="text-5xl text-green-600"> 
            GeeksforGeeks 
        </h1> 
          
        <h2 class="text-3xl"> 
            Motion-Safe utility 
        </h2> 
  
        <button class="mt-12 rounded-lg bg-blue-500  
                       px-4 py-2 text-white  
                       motion-safe:animate-pulse"> 
            Click Me 
        </button> 
    </div> 
</body> 
  
</html>

Output:

ezgifcom-crop-(26).gif

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <title>Motion-Reduced</title> 
    <script src= 
        "https://cdn.tailwindcss.com"> 
    </script> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="text-5xl text-green-600"> 
            GeeksforGeeks 
        </h1> 
  
        <h2 class="text-3xl"> 
            Motion-Reduced utility 
        </h2> 
  
        <div class="flex h-screen items-center justify-center"> 
            <div class="rounded-lg bg-white p-6 shadow-xl  
                        motion-reduce:scale-150  
                        motion-reduce:transform"> 
                <h2 class="mb-4 text-lg font-bold"> 
                    GeeksforGeeks 
                </h2> 
  
                <p class="text-gray-700"> 
                    You have a new notification! 
                </p> 
                  
                <button class="mt-4 rounded bg-green-600 px-4 py-2  
                    font-bold text-white hover:bg-green-600"> 
                    View 
                </button> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>