group和peer是标记类而非修饰符，仅声明状态作用域；group必须显式加在父容器上以影响后代元素，peer必须是可交互的同级前置兄弟元素，二者均不产生样式但为group-hover、peer-checked等提供编译上下文。
group 和 peer 不是“修饰符”，而是 Tailwind 中用于建立**状态作用域**的标记类。它们本身不产生样式，只提供上下文，让后续带 group-hover、peer-checked 等前缀的工具类能正确编译并生效。
group 必须显式加在父容器上，且只影响后代元素
写 hover:group 或把 group 加在子元素上，都无效。它必须是一个独立 class，加在能包裹所有联动目标的最外层容器上：
-
group类本身无样式，仅声明“这里是一个 group 上下文” - 只有后代元素才能响应
group-hover:text-blue-600这类规则；同级或父级元素无法被影响 - 如果容器是 flex 或 grid 的直接子项，别把
group加在子项上，而应加在 flex/grid 容器本身 - 绝对定位的子元素若 hover 失效，大概率是
pointer-events: none（比如父容器用了sr-only或透明遮罩），需手动设pointer-events: auto
错误示例：<div class="hover:group"><span class="group-hover:opacity-100">文字</span></div> —— hover:group 根本不被识别，group-hover 永远不会触发。
peer 必须是可交互的同级兄弟，且严格位于目标元素之前
peer 是一个锚点标记，不是状态源。它本身不触发任何变化，只让后续兄弟元素能通过 peer-checked、peer-focus 等响应其状态：
立即学习“前端免费学习笔记（深入）”；
-
peer元素必须是原生可交互控件（如<input type="checkbox">、<input type="radio">、带tabindex的<div>） <li>目标元素必须与 <code>peer同父、同级、且在它之后（不能嵌套在<label></label>里，也不能隔了 wrapper<div>） <li> <code>peer-checked要求 input 有name属性（radio 互斥）、不能用hidden属性隐藏（可用sr-only） - 不要写
hover:peer-checked—— Tailwind 不支持多层修饰符嵌套 - 正确做法是分别声明默认态和悬停/选中态：
md:scale-100 md:group-hover:scale-110 - 断点类（如
md:）必须和状态类（如group-hover:）并列，不能嵌套 - 动画过渡必须显式加在目标元素上：
transition-transform duration-200，否则group-hover:scale-110切换会突兀 - 移动端菜单用
peer-checked控制显隐时，iOS Safari 可能闪动，优先用max-h-0 / peer-checked:max-h-96替代hidden / block，并加will-change: transform
错误结构：<div><input type="checkbox" class="peer"></div>
<div class="peer-checked:bg-red-500">提示</div> —— 因为 input 被包在 div 里，和提示 div 不是兄弟，peer-checked 完全不编译。
响应式 + group/peer 的写法必须拆开，不能嵌套修饰符
像 md:group-hover:scale-110 或 lg:peer-checked:block 这种写法会被 Tailwind 忽略——修饰符链不合法，整个 class 丢弃。
真正难的不是写对 class，而是让 DOM 结构严丝合缝：group 要包得住、peer 要排得准、断点要拆得开。一旦结构错一位，样式就彻底静默——浏览器开发者工具里也看不到对应 CSS 规则，因为 Tailwind 根本没生成它。
