如何使用tailwindcss更改悬停宽度

【问题标题】：How to change width on hover using tailwindcss如何使用tailwindcss更改悬停宽度
【发布时间】：2020-09-12 11:04:00
【问题描述】：

我正在尝试使用 Tailwind css 在悬停时使 div 更宽。这可能吗？以及如何？

我尝试了以下方法，但没有成功：

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

【问题讨论】：

【解决方案1】：

By default，tailwind CSS 仅生成宽度实用程序的响应变体。要更改悬停时的宽度，您需要添加以下内容

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

在tailwind.config.js 文件中，然后重新构建tailwind CSS 文件。之后，您将能够通过将鼠标悬停在元素上来增加元素的宽度。

【讨论】：