Next.js中TailwindCSS使用group和group-focus实现下拉功能不生效

DevOps 小满

2026-10-5

你使用的group-focus监听的是父级.group元素自身的focus状态，但父级是普通div，默认无法获得焦点，点击按钮时只有按钮自身会触发focus，父元素不会进入focus状态，因此group-focus:visible始终不会生效。

方法1：使用group-focus-within实现（推荐）

适配你现有的group写法，只需两步修改：

调整next.config.js的variants配置，为visibility新增group-focus-within变体：

module.exports = {
  // 其余原有配置保持不变
  variants: {
    extend: {
      backgroundColor: ['group-focus'],
      visibility: ['hover', 'focus', 'group-focus', 'group-focus-within'],
    },
  },
  plugins: [],
}

修改组件代码，替换ul的状态触发类：

<div className="group">
    <button className="pointer-events-auto">Ingredients</button>
       <ul className="invisible group-focus-within:visible grid sm:grid-cols-3 text-justify sm:text-sm text-xs grid-cols-2 gap-x-3 gap-y-1 list-decimal list-inside">
           {menu.ingredients.map(item => <li key={item}>{ item }</li>)}
       </ul>
</div>

:focus-within会在容器内部任意元素获得焦点时触发，完全符合下拉菜单的交互逻辑，点击页面其他区域失去焦点后内容会自动隐藏。

方法2：使用peer类实现兄弟元素状态关联

无需修改配置，直接调整组件代码即可：

<div>
    <button className="pointer-events-auto peer">Ingredients</button>
       <ul className="invisible peer-focus:visible grid sm:grid-cols-3 text-justify sm:text-sm text-xs grid-cols-2 gap-x-3 gap-y-1 list-decimal list-inside">
           {menu.ingredients.map(item => <li key={item}>{ item }</li>)}
       </ul>
</div>

给按钮添加peer类后，后续兄弟元素可以直接通过peer-focus:前缀监听按钮的focus状态，直接满足点击按钮展示内容的需求。