How to set width transition in Tailwind CSS ?

Last Updated : 10 Mar, 2023

In Tailwind CSS, the transition utility is used to apply a width transition to an element. The transition utility accepts a list of properties, duration, and timing functions for the transition.

Approach: To create a width transition, we can use the transition class and a duration and easing function to animate the width change. For example, we can use the w-* classes to set the initial width of an element and then use the hover:w-* classes to increase the width on hover. To animate the width change smoothly, the transition-all class along with the desired duration and easing function is applied.

Syntax:

<element class="w-initial_width transition-all 
    duration:desired_duration timing_function 
    hover:w-final_width">
    ...
</element>

Below are some examples showing width transition in Tailwind CSS.

Example 1: In this example, there is a div element with an initial width of w-64, a height of h-64, and a background color of bg-green-500. The transition class applies a transition to the width property with a duration of 100 milliseconds and a timing function of ease-out. When the user hovers over the div element, the hover:w-80 class increases the width to 80 pixels. The transition class smoothly animates the width change over a duration of 100 milliseconds with an easing effect.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <script src="https://cdn.tailwindcss.com"> 
    </script> 
      
    <title> 
          How to set width transition in Tailwind CSS ? 
      </title> 
</head> 
  
<body> 
    <div class="w-64 h-64 bg-green-500  
                transition-all duration-100  
                ease-out hover:w-80"> 
    </div> 
</body> 
  
</html>

Output:

How to do width transition in Tailwind CSS?

Example 2: In this example, width transition using different timing functions and duration is applied to the div element. Each div element has an initial width of w-64 and a final width of w-80. We can observe that the speed of the width transition decreases gradually due to the change in the duration.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <script src= 
"https://cdn.tailwindcss.com"> 
      </script> 
    <title>Width Transition</title> 
</head> 
  
<body> 
    <div class="w-64 h-14 bg-green-500  
                transition-all duration-200  
                ease-in-out hover:w-80"> 
      </div> 
    <div class="w-64 h-14 bg-green-600  
                transition-all duration-300  
                ease-in hover:w-80"> 
      </div> 
    <div class="w-64 h-14 bg-green-700  
                transition-all duration-500  
                ease-out hover:w-80"> 
      </div> 
    <div class="w-64 h-14 bg-green-900  
                transition-all duration-1000 
                ease-linear hover:w-80"> 
      </div> 
</body> 
</html>