html - 当元素也悬停时，不显示 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 Variant为 boxShadow给您的 tailwind.js文件在 variants目的。

它看起来像这样:

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

这将允许您调整 boxShadow基于响应类，悬停或焦点。

我希望它有帮助。

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