Html 元素同时悬停时，尾风活动样式不显示

我正在使用TailwindCSS，制作一个简单的按钮，我希望在悬停时有一个阴影，然后在聚焦或激活时缩小。悬停样式有效，但活动样式无效。但是，当我单击它，然后将鼠标从按钮上移开时，它确实起作用

按钮：

<router-link :to="{name: 'createEvent'}" tag="button" class="w-1/6 mx-auto rounded-full font-semibold py-2 px-4 border border-white rounded text-blue-400 bg-white hover:shadow-lg focus:bounce-sm hover:translate-t-2px transition-fast">
   Get Started
</router-link>

截图：

悬停工程

同时启用“悬停”时，“焦点”不起作用

但“聚焦”在未启用“悬停”时起作用

---

有人能给我解释一下为什么会这样，以及我如何修复它吗？谢谢

您需要为

boxShadow

添加

Pseudo Class Variant

到

variants

对象中的

tailwind.js

文件中

它看起来是这样的：

变体：{
boxShadow:[“响应”、“悬停”、“聚焦”]，
},

这将允许您根据响应类、悬停或焦点调整

boxShadow

我希望有帮助

---

参考资料：

您能将相关代码放入or中吗？如果没有工作示例，元素状态很难进行故障排除。

/*scale*/
@variants responsive, hover, focus, active {
    .bounce-sm {
       transform: scale(0.95);
    }
}