javascript - 为什么这个演示Demo中的 tailwindcss variant 没有生效？

Question

https://play.tailwindcss.com/sNnjkZnGWF?file=config
项目里配置了变体

@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样式没有生效？

Answer 1

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

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

Answer 2

根据你提供的代码和描述，问题可能出在如何正确地使用 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 类的样式。

希望这能解决你的问题！如果还有其他疑问，请随时提问。