html - 在 TailwindCSS 中悬停时没有出现边框

Question

这是我的代码：

<button class="text-center hover:border-b-2 hover:border-black">Home</button>

我正在使用 TailwindCSS。当我在它hover:之前删除它时，border-b-2它运行良好，通常带有灰色边框，悬停时出现黑色边框。但是一旦我添加了hover前缀，边框就会消失。我的代码正确吗？

标签： htmlcsstailwind-css

Answer 1

每个Tailwindcss 默认变体参考

Tailwind css 默认情况下不包括所有实用程序的所有变体。

Howerver Tailwind css 允许您在 tailwind.config.js 中添加更多伪类

// tailwind.config.js
variants: {
  extend: {
    borderStyle: ['responsive', 'hover'],
    borderWidth: ['responsive', 'hover'],
    },
},

因此，此配置边框-* 将处于活动状态。