如何使用Tailwind仅在用户通过Tab键聚焦元素时添加环形样式？

要实现仅在用户通过键盘Tab键聚焦元素时显示红色环形边框，你需要使用Tailwind的focus-visible伪类变体——它专门针对键盘触发的聚焦生效，不会响应点击等鼠标操作带来的聚焦。

修改后的按钮代码如下：

<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-visible:ring focus-visible:ring-red-200
    active:bg-gray-100 active:text-gray-800
    transition ease-in duration-150
  "
>
Press me
</button>

关键说明： #

• 保留focus:outline-none：移除浏览器默认的聚焦轮廓，避免样式冲突
• 替换原focus:ring相关样式为focus-visible:ring：仅当通过键盘（如Tab）聚焦时，才会显示红色环形边框
• focus-visible是Tailwind内置的伪类变体，无需额外配置即可直接使用

内容的提问来源于stack exchange，提问作者Austin Maxheimer