Tailwind CSS 变体失效排查：解决焦点状态样式失效问题
在使用Tailwind CSS时，我们经常利用变体（variant）来根据不同状态（例如hover、focus）应用不同的样式。然而，有时变体却无法生效，本文将分析一个焦点状态样式失效的案例，并提供解决方案。
问题描述：
开发者使用Tailwind CSS Playground创建了一个按钮，并定义了一个名为border_always的工具类，期望按钮在获得焦点（focus）或悬停（hover）时应用该样式。为此，他们使用了addVariant函数添加了hocus变体（同时作用于:hover和:focus状态）。但实际使用中，tab键切换焦点到按钮时，预期的红色边框并未出现。
立即学习“前端免费学习笔记（深入）”；
代码片段：
addVariant('hocus', ['&:focus', '&&:hover'])
@layer utilities {
.border_always {
@apply border-2 border-solid border-red-500;
}
}
问题原因及解决方案：
问题在于浏览器默认的焦点样式（通常是蓝色边框）覆盖了自定义样式。border_always类只应用了边框样式，未处理默认焦点样式。解决方案需要两方面调整：
-
移除默认焦点轮廓： 在
.border_always类中添加outline-none来移除默认焦点轮廓：
@layer utilities {
.border_always {
@apply border-2 border-solid border-red-500 outline-none;
}
}
-
明确指定可见焦点状态： 为了确保所有焦点状态下都能应用样式，在
addVariant函数中添加:focus-visible，明确指定可见的焦点状态：
addVariant('hocus', ['&:focus', '&&:hover', '&&:focus-visible'])
通过以上修改，按钮获得焦点时，自定义的红色边框将正确显示。
