使用 TailwindCSS 的 Hover 上的環顏色

Question

我正在將 TailwindCSS 用於一個項目，但我遇到了一個奇怪的交互。

我正在尋找的結果是當我 hover 時在按鈕外有一個環，但是使用 Tailwind 的環類，我無法在 hover 上獲得環，但它使用焦點工作。

在填寫錯誤報告之前，我想也許你們之前可能會看到我的錯誤？

我制作了盡可能小的 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的文檔，Hover默認不啟用。

默認情況下，只會為環寬實用程序生成響應式、焦點內和焦點變體。

您可以通過修改 tailwind.config.js 文件的變體部分中的 ringWidth 屬性來控制為環寬度實用程序生成哪些變體。

例如，此配置還將生成 hover 和活動變體：

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

https://tailwindcss.com