在 TailwindCSS 中悬停时没有出现边框答案

【问题标题】：Border not appearing on hover in TailwindCSS在 TailwindCSS 中悬停时没有出现边框
【发布时间】：2021-08-03 19:00:14
【问题描述】：

这是我的代码：

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

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

【问题讨论】：

它在 Tailwind Play play.tailwindcss.com/aQKQxQOJxY 上运行良好，除非这不是您预期的行为。如果播放示例显示了您想要的内容，而您的本地项目没有，那么您有一个配置问题。
是的，这是所需的行为。我可能有配置问题

【解决方案1】：

每Tailwindcss default variants reference

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

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

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

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

【讨论】：