真正可用的高级状态联动需理清dom结构约束：peer专用于同级兄弟元素状态联动，要求input与目标元素同父同级且紧邻；group用于父子嵌套结构的悬停等多状态组合，修饰符仅作用于最近group祖先的后代；跨区域或伪元素需换用data属性或js配合。
要用 HTML + Tailwind 实现真正可用的高级状态联动，关键不是堆 class，而是理清 DOM 结构约束和修饰符作用边界。peer 和 group 各有明确适用场景，混用或错用结构，样式就静默失效。
peer 专治“同级兄弟”状态联动
peer 不是状态本身，它只是给后续兄弟元素标记一个可监听的上游锚点。真正起效的是 peer-checked、peer-focus、peer-invalid 这类带前缀的工具类，但必须满足三个硬性条件：
- input（或
<details></details>、<input type="checkbox">）和目标元素必须同父、同级，且目标元素紧接在 input 后面——中间不能有空格、换行、注释，也不能套<label></label>或其他 wrapper - input 必须带
name属性，哪怕只有一个复选框也要写，例如：<input type="checkbox" name="menu-toggle" class="peer sr-only"> - input 不能用
hidden属性或display: none隐藏；推荐用sr-only，避免 Safari 中opacity-0导致状态丢失
比如移动端菜单展开：
<div class="relative"> <input type="checkbox" name="mobile-menu" class="peer sr-only"><button class="lg:hidden" for="mobile-menu">☰</button> <nav class="absolute top-full left-0 w-64 bg-white shadow-lg peer-checked:block hidden"><a href="#">首页</a> </nav> </div>
这里 nav 是 input 的紧邻兄弟，所以 peer-checked:block 才能生效。
group 解决“父子嵌套”悬停与多状态组合
group 本质是作用域标记，不自带样式。它的修饰符（如 group-hover、group-focus）只对内部子元素生效，且永远绑定离它最近的那个 group 祖先。
- 把需要联动的元素（按钮、图标、提示文字）一起包进同一个
<div class="group">，再分别加 <code>group-hover:xxx类 - 多状态叠加写法：比如悬停同时聚焦时缩放，写成
group-hover:group-focus:scale-105，顺序无关，但两个状态都得满足 - 别把 group 加在太外层——如果中间某层也用了 group，子元素的
group-hover就会响应错层，而不是你预期的最外层容器
常见错误示例：
<div class="group"> <!-- 外层 group -->
<div>
<div class="group"> <!-- 中间又一个 group -->
<button class="group-hover:bg-blue-100">点我</button>
</div>
</div>
</div>
这时 button 的 group-hover 响应的是中间那个 group，不是外层的。
跨区域或非兄弟关系？得换思路
peer 只认紧邻兄弟，group 只管后代，两者都不支持向上选择、跨容器或伪元素直接响应。
- 想让 checkbox 控制远处的 header 或 footer 元素？peer 失效，改用
group-data-[open]：给顶层容器加data-open="true"，再配合 JS 切换，或用<details></details>原生控件驱动 - 需要 hover 时显示三角箭头（::before）？不能靠
group-hover::before，因为 Tailwind 不生成伪元素选择器。正确做法是先定义before:content-['▲'] before:opacity-0，再写group-hover:before:opacity-100 - 要实现“点击切换 + 持续高亮”，纯 CSS 无解——
peer-checked依赖表单控件状态，没有原生 click toggle；必须引入<input type="checkbox">或用 JS 控制data-state
性能与构建体积别踩坑
每个 group 修饰符（group-hover、group-focus、group-disabled）都会生成独立 CSS 规则。大量组合使用会让 CSS 体积明显膨胀。
- 动态列表中慎用
group-hover:group-focus:group-disabled:opacity-50这类三重组合，保留真实需要的状态即可 - 在
tailwind.config.js的corePlugins中关掉不用的 group 变体，比如不需要group-even就设为false - purge（content）配置必须覆盖所有模板路径，否则未在源码中显式出现的
group-hover:xxx会被误删
