TailwindCSS 中 `hocus` Variant 失效的原因是什么？

演示 demo 中 tailwindcss variant 失效的原因

在一个 tailwindcss 项目中，演示 demo 中的 variant 没有生效，导致当按钮通过 tab 键获取焦点时，预期的红色边框样式（border_always）没有出现。

问题根源

该问题源于没有正确配置 variant。具体来说，hocus variant 仅应用于 :focus 和 :hover 状态，而未考虑 :focus-visible 状态。

解决方案

为了解决这个问题，需要将 :focus-visible 状态添加到 hocus variant 的配置中：

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

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

通过添加 :focus-visible 状态，确保在按钮通过 tab 键获取焦点时，也会应用 border_always 样式。

代码修改

更新后的代码如下：

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

以上就是TailwindCSS 中 `hocus` Variant 失效的原因是什么？的详细内容，更多请关注硕下网其它相关文章！