group是tailwind中用于标记父容器作用域的无样式类，使子元素可通过group-hover等变体响应父级交互状态；它不可替代css父子选择器，因tailwind默认不生成嵌套规则，必须显式声明作用域边界。
group 是什么，为什么不能直接用父元素选择器？
在 Tailwind 中，group 本身不产生样式，它只是一个「标记类」，用来告诉后续的 group-hover、group-focus 等变体：「请把当前元素当作一个作用域，它的子元素里带 group- 前缀的类，要基于这个祖先的状态来生效」。这本质是 CSS 的 :has() 替代方案（目前浏览器支持有限），靠预设的父子结构 + 类名约定实现。
你不能写 .parent:hover .child { ... } 这种纯 CSS 选择器，因为 Tailwind 默认不生成这类组合规则——它只生成原子类，不生成嵌套逻辑。所以必须用 group 显式声明作用域边界。
常见错误现象：
• 给父容器加了 hover:bg-gray-100，但想让某个子图标变色，却直接给图标加 hover:text-blue-500 → 这个 hover 是监听图标自身，不是父容器
• 忘记在父容器上加 group，只在子元素用 group-hover:text-red-500 → 完全不生效，控制台也无报错
peer 怎么配合 checkbox / radio 实现兄弟联动？
peer 和 group 逻辑类似，但作用于「同级前序兄弟元素」，专为表单控件设计。典型场景：点击 label 控制 checkbox，再让 checkbox 后面的兄弟元素（比如描述文字、图标、卡片）响应状态变化。
必须满足两个条件才能触发：
• peer 必须加在 <input type="checkbox"> 或 <input type="radio"> 元素上
• 使用 peer-checked、peer-disabled 等变体的元素，必须是该 input 的**后序同级兄弟**（DOM 顺序在它后面，且在同一父容器下）
示例结构：
<div class="flex items-center"> <input type="checkbox" class="peer hidden"><span class="peer-checked:text-green-600 peer-checked:font-medium">已启用</span> <button class="ml-2 peer-checked:bg-blue-500">操作</button> </div>
注意：
• hidden 是为了隐藏原生 checkbox，但不能用 display: none（会导致状态失效），推荐用 hidden 或 opacity-0 w-0
• 如果把 span 放到 input 前面，peer-checked 就不会作用于它 —— 这是 CSS 层叠限制，Tailwind 无法绕过
group-hover 和 peer-checked 的性能与兼容性差异
group-hover 依赖的是浏览器原生的 :hover 伪类 + 预定义的父子关系，所有现代浏览器都支持，无兼容性问题；但要注意：移动端没有 hover 状态，group-hover 在 iOS/Android 上默认不触发（除非用户点一下模拟 hover，且页面未禁用 touch-action）。
peer-checked 依赖的是 :checked 伪类，兼容性更好（IE9+），且在移动端完全可用 —— 用户点击 label 或 input，状态立即更新，联动样式实时响应。
性能方面：
• group- 变体会生成额外的 CSS 规则（如 .group:hover .group-hover:xxx），若大量使用可能略微增加 CSS 体积
• peer- 变体同样生成规则，但因多用于表单，数量通常可控
• 二者都不涉及 JS，纯 CSS 渲染，无运行时开销
容易被忽略的关键细节
• group 必须加在「直接父容器」上，不能隔层：如果结构是 <div><div><button></button></div></div>，那么 group 要加在中间那层 div，而不是最外层
• peer 元素必须是 input，不能是 label 或 div 包裹的自定义开关 —— 否则 :checked 状态无法被识别
• Tailwind v3.4+ 支持 group-data-[name=value] 等自定义状态，但需要手动配置 content 并启用插件，不要默认认为它能监听任意 data 属性
• 构建时若启用了 purge（旧版）或 content 扫描，确保模板中真实出现了 group-hover:xxx 这类完整类名，否则会被误删
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
