css - 如何使用tailwindcss更改悬停宽度

Question

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

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

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

标签： csshoverwidthtailwind-css

Answer 1

默认情况下，tailwind CSS 只为宽度实用程序生成响应式变体。要更改悬停时的宽度，您需要添加以下内容

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

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