Question

我在一个项目中使用 TailwindCSS，但遇到了一个奇怪的交互。

我正在寻找的结果是当我悬停按钮时在按钮外有一个环，但是使用 Tailwind 的环类，我无法在悬停时获得环，但它可以使用焦点工作。

在填写错误报告之前，我想也许你们之前可能会看到我的错误？

我制作了尽可能小的代码笔来重现我的问题：https://codepen.io/Pymous/pen/bGBQKPO CodePen 包含这个简单的代码：

<button class="mt-4 ml-4 px-8 py-2 text-white bg-yellow-500 ring-offset-2 ring-transparent ring-2 focus:ring-red-500 hover:ring-red-500">
  Connexion
</button>

谢谢！

Answer 1

根据 tailwindcss 的文档，默认情况下不启用悬停。

<块引用>

默认情况下，只有响应式、focus-within 和 focus 变体为环宽度实用程序生成。

您可以控制为环宽度生成哪些变体通过修改变体部分中的 ringWidth 属性来实现实用程序您的 tailwind.config.js 文件。

例如，此配置还将生成悬停和活动变体：

event.listen(
    export_import_data_rel,
    "after_create",
    DDL("""ALTER TABLE export_import_data_rel ATTACH PARTITION export_import_data_rel_1 FOR VALUES IN ('1');""")
)

https://tailwindcss.com

使用 TailwindCSS 悬停时的铃声颜色

1 个答案: