TailwindCSS 变体“hocus”为何在获取焦点时无效？

大家好，今天本人给大家带来文章《TailwindCSS 变体“hocus”为何在获取焦点时无效？》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

tailwindcss 变体在鼠标悬停时为何无效？

一个 tailwindcss 演示中遇到了这样的问题：

@layer utilities {
  .border_always {
    @apply border-2 border-solid border-red-500;
  }
}

addvariant('hocus', ['&:focus', '&:hover'])

<button class="hocus:border_always">确定</button>

令人不解的是，当按钮通过 tab 键获取焦点时，红色边框样式 border_always 没有生效。

问题原因：

默认情况下，hover 变体只在鼠标悬停时生效。但使用 tab 键获取焦点不会触发 hover 事件。

解决方案：

要解决这个问题，需要将 hocus 变体修改为如下所示：

addvariant('hocus', ['&:focus', '&:hover', '&:focus-visible'])

通过添加 &:focus-visible 选择器，可以确保在使用 tab 键获取焦点时也可以触发 border_always 样式。

修改后的代码如下：

@layer utilities {
  .border_always {
    @apply border-2 border-solid border-red-500 outline-none;
  }
}

addvariant('hocus', ['&:focus', '&:hover', '&:focus-visible'])

这样一来，当按钮通过鼠标悬停或 tab 键获取焦点时，border_always 样式都会生效。

到这里，我们也就讲完了《TailwindCSS 变体“hocus”为何在获取焦点时无效？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！