元素也悬停时不显示顺风活动样式答案

【问题标题】：Tailwind active style not displaying when element is also hovered元素也悬停时不显示顺风活动样式
【发布时间】：2020-03-09 16:42:23
【问题描述】：

我正在使用 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>

CSS：

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

截图：

悬停工作

同时悬停时对焦不起作用

但是当没有悬停时焦点有效

有人可以向我解释这是为什么以及如何解决吗？谢谢！

【问题讨论】：

能否将相关代码放在runnable snippet 或codepen 中？如果没有工作示例，元素状态很难排除故障。

标签： html css laravel tailwind-css

【解决方案1】：

您需要将Pseudo-Class Variant for boxShadow 添加到tailwind.js 文件的variants 对象中。

看起来像这样：

variants: {
   boxShadow: ['responsive', 'hover', 'focus'],  
},

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

希望对你有帮助。

资源：https://tailwindcss.com/docs/pseudo-class-variants/#app

【讨论】：