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

Question

我试图在使用Tailwind CSS进行悬停时将div扩大。 这可能吗？以及如何？

我尝试了以下操作，但没有用：

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

Answer 1

By default，顺风CSS仅为width实用程序生成响应变体。要修改悬停时的宽度，您需要修改tailwind.config.js文件并添加

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

在tailwind.config.js文件中，然后重新构建顺风的css文件。之后，您可以通过将元素悬停在元素上来增加其宽度。