How To Change The Width On Hover Using Tailwind CSS?

Forums CSSHow To Change The Width On Hover Using Tailwind CSS?
Staff asked 2 years ago

How to change the width on hover using Tailwind CSS?

Answers (2)

Add Answer
Umang Ramani Marked As Accepted
Staff answered 2 years ago

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"]
}
Staff answered 2 years ago

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

Syntax:

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.

Subscribe

Select Categories