Tailwind CSS hocus 变体失效排查：焦点样式覆盖问题
使用 Tailwind CSS 时，变体（variants）用于控制样式在不同状态下的应用。然而，有时变体可能失效，例如 hocus 变体在按钮获得焦点时样式不生效。本文分析一个实际案例，解释 hocus 变体未能正确应用样式的原因及解决方案。
问题描述：
一个项目中自定义了 border_always 类，并使用 hocus 变体将其应用于按钮，期望在 :hover 和 :focus 状态下显示红色边框。但使用 Tab 键聚焦按钮时，红色边框未出现。代码如下：
立即学习“前端免费学习笔记（深入）”；
@layer utilities {
.border_always {
@apply border-2 border-solid border-red-500;
}
}
addVariant('hocus', ['&:focus', '&:hover']);
问题原因及解决方案：
问题在于浏览器默认的焦点样式（通常是蓝色边框）覆盖了自定义样式。即使 hocus 变体应用了 border_always，浏览器默认的 outline 样式优先级更高。 此外，&:focus 可能无法捕捉所有类型的 focus 事件。
解决方法：
-
移除默认焦点样式： 在
border_always类中添加outline-none：
@layer utilities {
.border_always {
@apply border-2 border-solid border-red-500 outline-none;
}
}
-
使用
:focus-visible： 在addVariant函数中添加&:focus-visible，确保仅在可见焦点状态下应用样式：
addVariant('hocus', ['&:focus', '&:hover', '&:focus-visible']);
通过以上修改，浏览器默认焦点样式将被移除，hocus 变体将在所有可见焦点状态下正确应用 border_always 类，达到预期效果。
