How to Do Width Transition in Tailwind CSS

By default, Tailwind CSS does not include width transitions in its transition utility classes. This guide will show you how to apply smooth width transitions using built-in Tailwind features and custom configurations.

Why Doesn’t Width Transition Work by Default?

Tailwind's default transition property includes:

transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow,
  transform;

Width and height are not included by default, so you need to explicitly add them.

Solution 1: Using Arbitrary Values (Tailwind v3+)

If you are using Tailwind v3 or later, you can apply an arbitrary transition property:

<div class="w-32 bg-blue-500 transition-[width] duration-300 ease-in-out hover:w-64">Hover Me</div>

This will smoothly transition the width from w-32 to w-64 when hovered.

Solution 2: Extending Tailwind Config for Global Use

If you need to use width transitions across multiple elements, extend Tailwind’s transitionProperty in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      transitionProperty: {
        width: 'width',
      },
    },
  },
}

Now you can use the transition-width class:

<div class="transition-width w-20 bg-green-500 duration-500 ease-in-out hover:w-60">
  Smooth Width Transition
</div>

Solution 3: Using Transform Instead of Width

For better performance, consider using transform instead of width:

<div
  class="scale-x-100 transform bg-red-500 transition-transform duration-500 ease-in-out hover:scale-x-150"
>
  Scale Instead of Width
</div>

This method uses GPU acceleration for a smoother effect.

FAQs

1. Why isn’t my width transition working in Tailwind CSS?

By default, Tailwind does not include width in its transition property list. You must either use arbitrary values (transition-[width]) or extend the transitionProperty in tailwind.config.js.

2. How can I make width transitions work without modifying Tailwind config?

Use arbitrary values like this:

<div class="w-24 bg-yellow-500 transition-[width] duration-300 hover:w-48"></div>

3. Is using `transform` better than `width` for animations?

Yes, transform (scale-x) is generally more performant than width since it uses GPU acceleration, reducing layout recalculations.