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

Question

我正在尝试使用Tailwind CSS将鼠标悬停在div上。这可能吗？以及如何？

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

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

Answer 1

在顺风中，悬停仅适用于文本宽度，颜色，背景等。但是，如果要在悬停时增加大小，则可能需要探索其他库https://codesandbox.io/embed/rj998k4vmm，或者如果不想使用简单的onMouseMove / onMouseLeve事件有点花哨。

Answer 2

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

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

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