使用 Tailwind，如何仅当用户按 Tab 键时才将环应用于元素？

Question

出于可访问性的目的，我想仅当用户使用键盘点击元素时才在元素周围添加红色环。我似乎无法在 Tailwind 中找到正确的属性来完成此操作。

我尝试通过

focus

伪类应用环，但这使得当用户单击按钮以及使用键盘上的选项卡时出现环。

<button
  type="button"
  class="
    inline-flex items-center justify-center w-full rounded-md
    px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700
    focus:outline-none focus:ring focus:ring-red-200
    active:bg-gray-100 active:text-gray-800
    transition ease-in duration-150
  "
>
Press me
</button>

Answer 1

您应该能够通过使用

focus-visible

修饰符来获得该效果。

例如：

class='focus:outline-none focus-visible:ring'

。

Answer 2

我有同样的问题 - 焦点环应该只显示为对 Tab 键导航的支持，但当用户单击表单字段时则不显示。目前还没找到好的解决办法。