tailwindcss group-hover 不适用于变换

Posted 2023-03-06

【中文标题】tailwindcss group-hover 不适用于变换

【英文标题】：tailwindcss group-hover not working on transforms

【发布时间】：2021-07-04 21:11:55

【问题描述】：

是否可以将转换与 group-hover 伪选择器一起使用？我可以让 group-hover 来处理像文本颜色这样的不转换的东西，但是在做 translate-x 或 scale 之类的事情时我不能让它工作。下面是一个例子。内部 div 上的组悬停转换都不适合我，但组悬停用于背景和文本工作。

<div class="group">
  <div id="inner" class="transform group-hover:translate-x-1/2 group-hover:scale-110 group-hover:bg-blue-200">
       <p class="group-hover:text-white">some text</p>
       </div>
</div>

我做错了吗？ here's a codepen of it in action

【参考方案1】：

请参阅，根据documentation group-hover 启用了一些不包括transform 的核心插件。

所以要支持transform，您必须在tailwind.config.js 中为其启用group-hover 变体，如文档中所述。

【讨论】：

谢谢你似乎错过了，即使它很清楚大声笑

请将此答案标记为已接受。所以它对其他人也有用:)

怎么开启可以加代码