css - 使用 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>

谢谢 ！

标签： csstailwind-css

Answer 1

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

默认情况下，只会为环宽实用程序生成响应式、焦点内和焦点变体。

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

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

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

https://tailwindcss.com