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

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《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>

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~