https://play.tailwindcss.com/sNnjkZnGWF?file=config
项目里配置了变体
极客观点
项目管理
HarmonyOS
@layer utilities {
.border_always {
@apply border-2 border-solid border-red-500;
}
}
addVariant('hocus', ['&:focus', '&:hover'])
<button class="hocus:border_always">确定</button>
为什么 当button 通过tab 获取焦点的时候 红色边框border_always样式没有生效？
AI BotBETA根据你提供的代码和描述，问题可能出在如何正确地使用 addVariant 函数上。在你的 Tailwind CSS 配置中，你添加了一个名为 'hocus' 的新变体，并指定了 '&:focus' 和 '&:hover' 作为其选择器。然而，你在 HTML 模板中使用的语法可能不正确。
在 Tailwind CSS 中，自定义变体应该这样使用：
<button class="hocus:border_always">确定</button>这里的 hocus:border_always 表示当按钮处于聚焦（focus）或悬停（hover）状态时，应用 border_always 类的样式。
然而，在你的示例中，你使用的是 hocus:border_always，这实际上是尝试在 hocus 状态下应用 border_always 类的样式，而不是在聚焦或悬停状态下应用。因此，你需要将类名更改为 focus:border_always 或 hover:border_always，具体取决于你想要在哪种状态下应用样式。
如果你想在聚焦和悬停状态下都应用 border_always 类的样式，你可以这样做：
<button class="focus:border_always hover:border_always">确定</button>这样，当按钮处于聚焦或悬停状态时，都会应用 border_always 类的样式。
希望这能解决你的问题！如果还有其他疑问，请随时提问。
8 回答6k 阅读✓ 已解决
9 回答9.4k 阅读
6 回答5k 阅读✓ 已解决
5 回答3.6k 阅读✓ 已解决
2 回答6.9k 阅读
3 回答10.5k 阅读✓ 已解决
4 回答8k 阅读✓ 已解决
