边框样式在顺风悬停时不起作用

Question

我正在使用 Tailwind v2.1.0 和 Laravel v8.12

我试图将鼠标悬停在具有顺风类的标签上，但它不起作用

<a href="/" class="text-gray-800 border-transparent border-b-2 hover:border-gray-600 hover:text-gray-800 px-3 py-2 text-sm font-medium uppercase">Home</a>

当我用 border-gray-100 或任何其他颜色替换 border-transparent 时，我可以看到悬停效果。

最初我不想要任何边框，这就是提到边框透明的原因。

可能是什么问题？

Answer 1

以下类应该完成这项工作：

hover:border-gray-700 border-transparent border-2

我从这里找到了答案

<li class="outline-none hover:border-gray-700 border-transparent border-2 hover:border-current" ><a href="#">Info</></li>

Answer 2

您刚刚拼写错误border-transparent。应该border-transparent

编辑：我没有发现您的代码有任何问题。检查您的代码的演示。