就像他在评论中说的@diego，这在技术上是不可能的，只有顺风。

顺风框架备选方案

也许你可以使用一个顺风框架，比如windiCSShttps://windicss.org/features/variant-groups.html
具有以下功能：

<div class="hover:(bg-gray-400 font-medium) bg-white font-light"/>

javascript vanilla（简单脚本）

只要顺风吗？
所以我想也许我们可以创建一个简单JS脚本来解决这个问题。

x一个一个一个一个x一个一个二个x

想从JS脚本中获得更多信息？

• 还有:focus、:lg、:sm等等。

使用此：
一个三个三个一个

还要确保将脚本代码放在页面末尾或DomContentLoaded事件中

优点：

• 减少键入的重复字符

保存超过25个字符（仅在您的示例中）

• 多行属性

如您所见，您可以在一行中编写类，
而悬停逻辑在另一行中。使其易于调试。

• 开箱即用。

复制粘贴，然后调用函数。
使用正确的参数（focus, sm, lg, xl, 2xl）或不使用任何参数（将为hover）

// just call it at the end of the page
twPseudo();

你可以在你的页面或模板的<style>块中创建一个新的类，然后使用@apply来使用所需的tailwind类，比如：

<style>
.mybutton {
    @apply m-auto p-4 rounded-md  bg-blue-200 transition
}

.mybutton:hover {
    @apply bg-blue-400 -translate-y-2 -translate-x-2 scale-110 shadow-2xl shadow-blue-400 text-white
}
</style>

现在，如果在按钮上设置mybutton类，悬停也将起作用。
你也可以将这些类添加到你项目的主css文件中。尽管这不是tailwind的首选方式。请参阅Tailwind文档。

对于使用react的人偶然发现了这个问题，有一个更好的方法来解决以下问题：

const pseudoJoin = (selector, str) => {
  return selector+":"+str.split(" ").join(" "+selector+":")
}

现在，您可以将其命名为以下任意名称：

<div className=`${pseudoJoin('hover','classes you want on hover')} some more classes`>Hello World!</div>

或者当您使用classnames框架时：

<div className={ classnames(
   pseudoJoin('hover', 'classes you want on hover'),
  "Other classes here"
)}>Hello World!</div>