How to do width transition in Tailwind CSS?

Question

When I try to do a transition using the default "w-#" options in Tailwind, my transitions don't apply. When I hard code in my own classes for width, it works fine. Is there something weird with Tailwinds CSS and how it handles width that would cause this?

Here's the HTML text. The main part here is the dynamic class "sidebarWidth" which switches when the button is clicked. The transition-all, slowest and ease are all things I extended in Tailwind.

<nav class="text-white absolute md:relative flex-col min-h-full bg-black mt-24 md:mt-12 transition-all transition-slowest ease" :class="sidebarWidth">

Here's the JS code in the computed properties of the Vue component

sidebarWidth: function() {
      if (this.$store.getters.isSidebarCollapsed) {
        return "w-14 invisible md:visible";
      } else {
        return "w-64";
      }
    }

If I swap out w-14 and w-64 for the following classes, it works great.

<style scoped>
.width1 {
  width: 100px;
}

.width2 {
  width: 400px;
}
</style>

I basically want my sidebar nav to slide in when I click a button. In mobile, the sidebar nav is hidden and I want it to slide out. In the desktop, it should be a small nav and then slide out to a full screen nav. It works, but the slide transition doesn't work. Also, the margin change between mobile and desktop does animate properly.

Answer 1

You need to perform a few steps to activate the behaviour you are looking for.

The first one is about extending you Tailwind theme via tailwind.config.js. You need to add the transitionProperty for width.

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

The changes above create the transition-width class. Simply apply this one to your nav tag. In your specific case you can overwrite the transition-all class.

<nav class="text-white absolute md:relative flex-col min-h-full bg-black mt-24 md:mt-12 transition-width transition-slowest ease" :class="sidebarWidth">

The last step is quite easy: ensure that Tailwind is recreating the CSS. Afterwards you should see a smooth width transition in your project.

Background to the Problem

By default, the width and height transitions are not activated in Tailwind CSS. Here is the CSS that will be applied when using transition class.

transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

Like you can see width and height are missing in transition-property.

You can find more information about it in the Tailwind documentation.

Answer 2

You can make your own transition property like in tailwind.config.js :

Multiple properties :

module.exports = {
  theme: {
    extend: {
      transitionProperty: {
        multiple: "width , height , backgroundColor , border-radius"
      }
   }
}

One property :

module.exports = {
  theme: {
    extend: {
      transitionProperty: {
        width: "width"
      }
   }
}