How to change width on hover using tailwindcss

Question

I'm trying to make a div wider on hovering using Tailwind css. Is this possible? and how?

I've tried the following but it didn't work:

class="w-1/3 hover:w-3/5"

Answer 1

By default, tailwind CSS only generates responsive variants for width utilities. To change the width on hover, you need to add the following

variants: {
    width: ["responsive", "hover", "focus"]
}

in the tailwind.config.js file and then re-build the tailwind CSS file. After this, you will be able to increase the width of elements by hovering over them.