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

Question

我正在尝试使用Tailwind css扩大悬停的div。这个是可能的吗？又是如何做到的？

我尝试了以下方法，但不起作用：

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

Answer 1

By default，顺风CSS只为宽度实用工具生成响应式变体。要更改悬停时的宽度，您需要添加以下内容

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

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