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”为何在获取焦点时无效？的详细内容，更多请关注硕下网其它相关文章！