使用TailwindCSS悬停时的环形颜色

我在一个项目中使用TailwindCSS，我被一个奇怪的动作卡住了

我想要的结果是，当我悬停按钮时，按钮外会有一个戒指，但是使用Tailwind中的ring类，我无法将戒指悬停，但它使用focus工作

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

我制作了尽可能小的代码笔来重现我的问题： 代码笔包含以下简单代码：

<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>

连接

---

谢谢

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

默认情况下，仅在和焦点变体中有响应，焦点 为环宽度实用程序生成

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

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

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

---

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

默认情况下，仅在和焦点变体中有响应，焦点 为环宽度实用程序生成

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

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

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

---

谢谢我在文档中没有看到，非常简单！我现在只需要让我的自定义tailwind编译：DThanks！我在文档中没有看到，非常简单！我只需要让我的自定义尾风现在编译然后：D