TailwindCss 查询表
约 564 字大约 2 分钟
2026-01-11
group
group 是 Tailwind 里一个“把父元素的状态传给子元素”的标记类。
平时写：hover:bg-... 让“自己”在悬浮时变化。
但如果你想实现：鼠标悬浮在父容器上时，里面的子元素也跟着变，就需要 group + group-hover:*。
它怎么工作
- 在父元素上加：
group - 在子元素上写：
group-hover:xxx（或group-focus:xxx等）
当父元素被 hover/focus 等状态触发时，带 group-* 的子元素会响应。
如果一个区域里有多个父 group，怕串台，可以用命名：
- 父：
group/card - 子：
group-hover/card:opacity-100
小技巧
hover:= 自己触发自己group-hover:= 父触发子peer-hover:= 兄弟触发我（同级之间联动）
当父元素 hover 时，子元素应用某些样式
等价的原生 CSS 大概是这样（便于你建立直觉）：
.parent:hover .child {
color: #4f46e5;
}Tailwind 写法就是：
- 父：
group - 子：
group-hover:text-indigo-600
范围：
只要某个元素在这个 group 父元素的“后代范围”里（child / grandchild / 更深层级），并且它自己写了 group-hover:*，那么父 hover 时它就会生效。
也就是说它等价于：
.group:hover .any-descendant-with-group-hover { ... }但注意两点：
不是“父下面所有子元素都会自动应用” 只有“那些你显式写了 group-hover: 的元素”才会变。
层级不重要 group-hover: 对后代选择器生效：子、孙子、曾孙……都行。
重要：多个 group 嵌套时，谁生效？
如果你嵌套了 group，内层元素的 group-hover:* 默认会跟离它最近的那个 group（一般就是同一条祖先链上的最近 group）一起工作。
但为了避免“我到底跟谁走”的心智负担，Tailwind 还支持 命名 group，非常推荐：
命名 group（避免串台）
<div class="group/card p-4 border">
<div class="group/menu mt-3 border p-3">
<p class="group-hover/card:text-indigo-600">跟外层 card 走</p>
<p class="group-hover/menu:text-emerald-600">跟内层 menu 走</p>
</div>
</div>常见坑：绝对定位跑出父范围
如果子元素用 absolute 跑到父元素视觉范围外，鼠标移到它上面时，可能父不再 hover，导致 group-hover: 失效（hover 丢失）。这不是 group 的问题，是 hover 判定范围的问题。