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

错误示例：

文字

—— hover:group 根本不被识别，group-hover 永远不会触发。

peer 必须是可交互的同级兄弟，且严格位于目标元素之前

peer 是一个锚点标记，不是状态源。它本身不触发任何变化，只让后续兄弟元素能通过 peer-checked、peer-focus 等响应其状态：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• peer 元素必须是原生可交互控件（如 、、带 tabindex 的
  ）
• 目标元素必须与 peer 同父、同级、且在它之后（不能嵌套在 里，也不能隔了 wrapper
  ）
• peer-checked 要求 input 有 name 属性（radio 互斥）、不能用 hidden 属性隐藏（可用 sr-only）
• 不要写 hover:peer-checked —— Tailwind 不支持多层修饰符嵌套

错误结构：

提示
—— 因为 input 被包在 div 里，和提示 div 不是兄弟，peer-checked 完全不编译。

响应式 + group/peer 的写法必须拆开，不能嵌套修饰符

像 md:group-hover:scale-110 或 lg:peer-checked:block 这种写法会被 Tailwind 忽略——修饰符链不合法，整个 class 丢弃。

• 正确做法是分别声明默认态和悬停/选中态：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

真正难的不是写对 class，而是让 DOM 结构严丝合缝：group 要包得住、peer 要排得准、断点要拆得开。一旦结构错一位，样式就彻底静默——浏览器开发者工具里也看不到对应 CSS 规则，因为 Tailwind 根本没生成它。