如何在TailwindCSS中结合focus-within与focus-visible实现键盘聚焦

需求：仅当通过键盘聚焦按钮时，让包裹按钮的div触发聚焦样式；鼠标点击按钮时不触发。现有focus-within会响应所有聚焦行为，而我们需要结合focus-visible的逻辑，但目前没有原生的focus-within-visible选择器，以下是可行方案：

现有代码示例 #

<div class="flex h-screen items-center justify-center">
  <div class="rounded-lg bg-green-100 px-20 py-20 focus-within:ring-4 focus-within:ring-blue-300">
    <button class="bg-green-200 px-6 py-3 focus:outline-none">Focusable Button</button>
  </div>
</div>

方案一：JavaScript辅助实现（兼容多数浏览器） #

通过监听按钮的focus和blur事件，结合浏览器原生的focus-visible判断，手动给父容器添加/移除样式类：

1. 修改HTML结构，给父容器和按钮加标识：

<div class="flex h-screen items-center justify-center">
  <div class="rounded-lg bg-green-100 px-20 py-20 ring-0 ring-blue-300 transition-all" id="button-container">
    <button class="bg-green-200 px-6 py-3 focus:outline-none" id="target-button">Focusable Button</button>
  </div>
</div>

2. 添加JavaScript逻辑：

const container = document.getElementById('button-container');
const button = document.getElementById('target-button');

button.addEventListener('focus', () => {
  if (button.matches(':focus-visible')) {
    container.classList.add('ring-4');
  }
});

button.addEventListener('blur', () => {
  container.classList.remove('ring-4');
});

也可以结合Tailwind自定义工具类来统一管理样式，保持代码风格一致。

方案二：使用:has(:focus-visible)选择器（现代浏览器支持） #

部分现代浏览器支持:has选择器，可直接匹配包含键盘聚焦按钮的父容器，在Tailwind中可通过以下两种方式实现：

方法1：自定义Tailwind变体 #

在tailwind.config.js中扩展变体：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...其他配置
  variants: {
    extend: {
      ringWidth: ['has-focus-visible'],
      ringColor: ['has-focus-visible'],
    },
  },
  plugins: [
    function({ addVariant }) {
      addVariant('has-focus-visible', '&:has(:focus-visible)');
    },
  ],
}

之后在HTML中使用自定义变体类：

<div class="flex h-screen items-center justify-center">
  <div class="rounded-lg bg-green-100 px-20 py-20 has-focus-visible:ring-4 has-focus-visible:ring-blue-300">
    <button class="bg-green-200 px-6 py-3 focus:outline-none">Focusable Button</button>
  </div>
</div>

方法2：直接使用自定义样式 #

如果不想修改Tailwind配置，可直接在HTML的<style>标签中结合Tailwind指令写原生CSS：

<style>
  .button-container:has(:focus-visible) {
    @apply ring-4 ring-blue-300;
  }
</style>

<div class="flex h-screen items-center justify-center">
  <div class="rounded-lg bg-green-100 px-20 py-20 button-container">
    <button class="bg-green-200 px-6 py-3 focus:outline-none">Focusable Button</button>
  </div>
</div>

注意：:has选择器目前在Chrome、Edge、Safari等现代浏览器中支持，Firefox需开启layout.css.has-selector.enabled配置才能使用。

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