How to Set Width Transition in Tailwind CSS ?

Last Updated : 09 Oct, 2024

In Tailwind CSS, setting a width transition allows for smooth animation when an element’s width changes. It enhances the user experience by gradually transitioning the width over a specified duration, creating a polished effect. Tailwind’s utility classes make implementing transitions simple.

Approach: Using Utility Classes

To create a width transition, use the transition class with a specified duration and easing function. Set the initial width using w-* classes, and change the width on hover using hover:w-*, applying transition-all for smooth animation.

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, The div has w-64, h-64, and bg-green-500. Using transition with duration-100 and ease-out, it smoothly expands to w-80 on hover, animating the width change over 100 milliseconds.

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, The divs have w-64 initially and transition to w-80 with different timing functions. The transition speed varies, gradually slowing down due to the differing duration settings for each element.

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>