使用 TailwindCSS 悬停时的环形颜色

Question

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

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

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

我制作了尽可能小的 codepen 来重现我的问题：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 文件。

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

  // tailwind.config.js
     module.exports = {
       variants: {
         extend: {
           // ...
   
          ringWidth: ['hover', 'active'],
         }
       }
     }

https://tailwindcss.com