问题：
class="hover:bg-blue-400 hover:-translate-y-2 hover:-translate-x-2 hover:scale-110 hover:shadow-2xl hover:shadow-blue-400 hover:text-white"
在这里你可以看到，有相同的前缀重复。
hover:foo hover:bar hover:hello hover:world hover:某物hover:another
我想知道是否有办法不写多次hover: prefix?
想法：
是做类似的事情：
hover:(class class class class class)用括号或类似的东西，所以里面的所有类
()将像一个类一样并自动添加到hover:
我认为顺风中有这个想法，但我不知道其语法。
如果可能的话，该解决方案还需要适用于所有其他前缀
简单的示例演示：
// not important, only for deleting the console.warn()
console.clear();<script src="https://cdn.tailwindcss.com"></script>
<body class="flex h-screen">
<button class="m-auto p-4 rounded-md bg-blue-200 transition hover:bg-blue-400 hover:-translate-y-2 hover:-translate-x-2 hover:scale-110 hover:shadow-2xl hover:shadow-blue-400 hover:text-white">
hello world
</button>
</body>我看了所有的文档，都没有讨论这个概念：https://tailwindcss.com/docs/hover-focus-and-other-states#hover-focus-and-active
如果有人在这方面有经验，那将会很有帮助！
就像他在评论中@diego 所说的那样，这在技术上仅靠顺风是不可能的。
也许你使用顺风框架，比如windiCSS https://windicss.org/features/variant-groups.html
具有此功能的：
<div class="hover:(bg-gray-400 font-medium) bg-white font-light"/>
只想要顺风？
所以我想也许我们可以创建一个简单的JS脚本来解决这个问题。
twHover();
function twHover() {
// get only the elements that have the hover attribute
let hoverEls = document.querySelectorAll("[data-hover]");
// loop through the elements that have the hover attribute
hoverEls.forEach((el) => {
// we get the string inside the attribute
// and then make it into a array
let twHoverClasses = `${el.dataset.hover}`.split(" ");
// loop through the classes inside the element's attributes
twHoverClasses.forEach((className) => {
// add the class for you `hover:className`
el.classList.add(`hover:${className}`);
});
});
}<script src="https://cdn.tailwindcss.com"></script>
<body class="flex h-screen">
<!-- original -->
<button class="m-auto p-4 rounded-md bg-blue-200 transition hover:bg-blue-400 hover:-translate-y-2 hover:-translate-x-2 hover:scale-110 hover:shadow-2xl hover:shadow-blue-40 hover:text-white">original</button>
<!-- with script -->
<button data-hover="bg-blue-400 -translate-y-2 -translate-x-2 scale-110 shadow-2xl shadow-blue-40 text-white" class="m-auto p-4 rounded-md bg-blue-200 transition">with script</button>
</body>:focus, :lg, :sm， 等等。用这个：
// this can be any preudo class that tailwind can have
twPseudo("focus");
// if there is nothing as parameter, we use hover
twPseudo();
function twPseudo(pseudo = "hover") {
// get only the elements that have the hover attribute
let hoverEls = document.querySelectorAll(`[data-${pseudo}]`);
// loop through the elements that have the hover attribute
hoverEls.forEach((el) => {
// we get the string inside the attribute
// and then make it into a array
let twHoverClasses = `${el.dataset[pseudo]}`.split(" ");
// loop through the classes inside the element's attributes
twHoverClasses.forEach((className) => {
// add the class for you `hover:className`
el.classList.add(`${pseudo}:${className}`);
});
});
}<script src="https://cdn.tailwindcss.com"></script>
<body class="grid grid-cols-2 place-items-center h-screen">
<!-- original -->
<div>
<h2 class="text-3xl font-bold text-blue-500 mb-4">original</h2>
<!-- hover -->
<button class="m-auto p-4 rounded-md bg-blue-200 transition hover:bg-blue-400 hover:-translate-y-2 hover:-translate-x-2 hover:scale-110 hover:shadow-2xl hover:shadow-blue-40 hover:text-white">hover</button>
<!-- focus -->
<button class="m-auto p-4 rounded-md bg-blue-200 transition focus:bg-blue-400 focus:-translate-y-2 focus:-translate-x-2 focus:scale-110 focus:shadow-2xl focus:shadow-blue-40 focus:text-white">focus</button>
</div>
<!-- with script -->
<div>
<h2 class="text-3xl font-bold text-blue-500 mb-4">with script</h2>
<!-- hover -->
<button data-hover="bg-blue-400 -translate-y-2 -translate-x-2 scale-110 shadow-2xl shadow-blue-40 text-white" class="m-auto p-4 rounded-md bg-blue-200 transition">hover</button>
<!-- focus -->
<button data-focus="bg-blue-400 -translate-y-2 -translate-x-2 scale-110 shadow-2xl shadow-blue-40 text-white" class="m-auto p-4 rounded-md bg-blue-200 transition">focus</button>
</div>
</body>
还要确保将脚本代码放在页面末尾或内部DomContentLoaded event
保存超过 25 个字符（仅在您的示例中）
正如您所看到的，您可以将您的课程写在一行中，
以及另一行的悬停逻辑。使其易于调试。
focus, sm, lg, xl, 2xl）或不带任何参数（将是hover)// just call it at the end of the page
twPseudo();