有没有一种方法可以在单个“hover”实例上链接多个Tailwind CSS类？

Question

我想知道是否有一种方法可以在html元素上单个hover实例中链接多个tailwind css类，而不是使用多个hover实例。

例如，不用这样：

<button class="hover:bg-blue-900 hover:text-white"></button>

无论您选择这个还是其他选项

<button class="hover:bg-blue-900:text-white"></button>

- Boosuro

---

没有适当的方法来做这件事。 - Amini

我很擅长 CSS，并决定开始学习 Tailwind。我提出了同样的问题，但没有找到解决方法...这让我感到非常失望！这超越了这个框架少写 CSS 的目的。我想我会继续使用原始的 CSS 或者学习 SASS。 - AJ Zack

Answer 1

没有。从官方文档(https://tailwindcss.com/docs/hover-focus-and-other-states)可以看到,它们自己会添加多个聚焦/悬停类。

但是，您可以创建可重用的样式来对抗此类情况

- AMunim

Answer 2

很遗憾，我们无法在Tailwind CSS中进行变体分组。因此，回答您的问题，目前没有办法在单个hover或任何其他伪类实例上链接多个tailwind类。原因是这会在最后导致性能问题。

根据TailwindCSS的创建者Adam Wathan的说法：

虽然分组语法在编写时看起来像更少的代码，但它实际上会在生产中创建更大的CSS文件和更大的HTML文件，从而成为一种非常明显的性能反模式。尽管编写起来更好，而且性能成本不高，但仍有机会进一步开发它，只是为了喜欢它的人的开发人员体验。但承认鼓励任何对性能有害的事情还是有些犹豫。

作为替代方案，我们可以使用不同的策略来重用项目中的样式，这些策略在tailwind文档中有描述，@amunim之前也提到过。

请阅读整个推文和表格以获取更多细节： https://twitter.com/adamwathan/status/1461519820411789314 https://github.com/tailwindlabs/tailwindcss/discussions/8337

- Code_Warrior

Answer 3

很遗憾似乎不行。也许应该向团队建议一些东西。

- PeteG

Answer 4

我曾尝试过类似的事情，我希望当鼠标停留在div上时文本会改变颜色。
在文档中搜索后，我找到了可以帮助我的“group”：
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state

我尝试了不同类型的悬停效果，例如：
hover:bg-green-600 text-gray-50
hover:[bg-green-600 text-gray-50]
hover:(bg-green-600 | text-gray-50)

也许您可以尝试将按钮包裹在

中并添加group类。

以前我的代码并没有像这样工作。

<Link to='/home'>
  <div className="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:(bg-green-600 text-gray-50)">
    <span className="text-[15px] ml-4 text-gray-500 font-bold">Home</span>
  </div>
</Link>

使用group之后

<Link to='/home' className='group'>
  <div className="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer group-hover:bg-green-600" >
    <span className="text-[15px] ml-4 text-gray-500 group-hover:text-gray-50 font-bold">Home</span>
  </div>
</Link>

使用group时，当我悬停在div上时，它也会改变span文本的颜色，这样光标就不需要完全覆盖单词才能触发悬停效果。

但我仍然希望有一种方法可以在同一个悬停事件中放置多个类，希望将来能够实现...

希望这可以帮到你

- alex sam

Answer 5

我遇到了同样的问题，本来想写个Tailwind插件解决它，但结果发现改变他们设定的规则很困难，你只能通过添加新的变体和实用程序来扩展它，而不能像hover:(text-white bg-red-500)这样做。

不过，我还是找到了一个名为twin.marco的工具，它具有此变体组特性，所以一定要去看看。

- Aditya