需在父容器添加group类，子元素使用group-hover:*响应；group仅标记状态，不带样式，且group-hover只对后代生效，不能跨dom层级或作用于兄弟元素。
Group触发时如何让子元素响应样式变化
Group本身不直接改变子元素，而是给父容器打上一个“被触发”的状态标记，子元素需要用 group-hover:、group-focus: 这类变体去监听。关键点是：必须在父元素上加 group 类，且子元素选择器要写在同一个DOM层级下（不能跨组件边界或被React Portal移走）。
常见错误是把 group 加在按钮上，却想控制按钮内部的图标颜色——这不行，因为图标是子元素，但触发源（比如 hover）作用在按钮自身，此时应直接用 hover:；group 适用的是“父容器被交互，影响其内部其他兄弟元素”的场景。
- 正确结构：
<div class="group"> <button>触发按钮</button> <div class="opacity-0 group-hover:opacity-100">被显示的内容</div> </div>
- 如果子元素是绝对定位或 flex item，需确保它没被
display: none或visibility: hidden硬性隐藏，否则group-hover:opacity-100不会生效 - 多个 group 可嵌套，但内层
group不会继承外层状态，各自独立
Peer怎样让相邻兄弟元素联动响应
peer 的核心是“兄弟关系”和“位置前置”。它要求目标元素（被控制者）必须紧跟在带 peer 的元素之后，且两者是同一父容器下的直接子元素。典型用例是 checkbox + label，或者 input + error message。
容易踩的坑是误以为 peer-checked: 能作用于任意后代——它只对紧邻的下一个兄弟元素生效，中间插了别的标签（哪怕只是 <span></span>）就会断链。
- 有效结构：
<input type="checkbox" class="peer hidden"><p class="text-gray-400 peer-checked:text-blue-500">已勾选</p>
- 若中间有其它元素，可用
peer-*:peer-checked:组合变体（Tailwind v3.3+），但仅限于同级兄弟链上的第 N 个节点，不推荐复杂嵌套 -
peer不支持伪类如:disabled的联动，只能响应状态类（checked、focus、required等）
Group与Peer混用时的DOM结构约束
Group 和 Peer 机制都极度依赖HTML结构顺序与层级，混用时尤其敏感。例如想实现“当某个卡片被 hover，同时让卡片内的开关控件影响其旁边的说明文字”，就得确认三者是否在同一父容器中，并满足 peer 的紧邻要求。
最常被忽略的一点：JSX 中的 Fragment（>）或条件渲染（{show && <div>...</div>}）可能破坏 DOM 相邻性，导致 peer 失效。此时必须用真实 wrapper 元素兜底。
- 避免这样写：
<div class="group"> <button class="peer">开关</button> {isEnabled && <p class="peer-checked:text-green-600">已启用</p>} </div>—— 因为{isEnabled && ...}在 false 时不会渲染，peer 关系断裂 - 改成固定结构：
<div class="group"> <button class="peer">开关</button> <p class="peer-checked:text-green-600">已启用</p> </div>
，再用opacity-0或hidden控制显隐 - Group 和 Peer 可共存，但不要指望
group-hover:peer-checked:这种写法——Tailwind 不支持组合状态变体
为什么有些状态变体不生效？检查这些地方
Tailwind 的 group/peer 变体依赖 PurgeCSS 的类名提取逻辑，如果类名是动态拼接（如 class={`group-hover:${isDark ? 'text-white' : 'text-gray-800'}`}），构建时会被剔除，导致失效。
- 确保所有用到的 group/peer 变体都在源码中以静态字符串形式出现，例如
group-hover:text-blue-500，而不是通过模板字符串或变量注入 - 使用 JIT 模式（
mode: "jit"）可缓解部分问题，但无法解决运行时动态类名 - 检查浏览器 DevTools 中元素是否真有
group类，以及 hover/focus 时父容器是否确实获得了对应伪类（如:hover），有时候 CSS 优先级或 pointer-events 设置会拦截事件传递
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
