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.

Dapple

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.

Tutankhamen

But is there any reason for not having width and also position missing in transition properties? Are we supposed to use transform in these cases instead maybe? – Mesial

Transform should be much better thanks to the hardware acceleration, unfortunately I haven't had time to experiment with it yet. – Tutankhamen

Docs on the requirement to extend the config are here – Deduction

Also we can use arbitrary values transition-[width] as here: tailwindcss.com/docs/transition-property#arbitrary-values – Tidal

For some reason this does not work, when transition between w-screen and max-w-3xl for example. Only when transitioning between specified widths, e.g. w-96. – Breakneck

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"
      }
   }
}

Aviles

Answer 3

If you're just looking to implement this in a single location & it's not something you need throughout your entire theme (for that follow @insertcoin answer above), you can simply use an arbitrary one-off value as outlined here in the Tailwind Docs.

The snippet below worked nicely for me:

<div class="transition-[width] duration-300">
  <!-- ... -->
</div>

Cinemascope