如何使用tailwindcss更改悬停宽度

Question

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

我已经尝试了以下但没有奏效：

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

Answer 1

默认情况下，tailwind css 仅为宽度实用程序生成响应变体。要修改悬停宽度，您需要添加以下内容

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

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