当元素也悬停时，不显示 Tailwind 活动样式

Question

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

截图：

悬停作品

当悬停也打开时焦点不起作用

但是当悬停未打开时焦点有效

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

Answer 1

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

它看起来像这样：

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

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

我希望它有帮助。

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