如何使用 tailwindcss 更改悬停时的宽度

Question

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

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

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

Answer 1

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

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

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