group修饰符必须配合显式添加的group类名才能生效，它仅作用于最近的group祖先元素内的子元素，不支持兄弟选择器或伪元素，需用peer替代；多层嵌套时易误绑定，应按联动区域独立加group。
Group修饰符必须配合group类名才能生效
很多人写group-hover:xxx却没效果，根本原因是父容器漏了group——Tailwind的group不是自动推导的，它必须显式加在触发交互的祖先元素上。比如想让子元素在父容器hover时变色，得这样写：
<div class="group"> <button>操作按钮</button> <span class="opacity-0 group-hover:opacity-100">提示文字</span> </div>
注意：group本身不带样式，纯作作用域标记；group-hover等修饰符只对它的直接或嵌套子元素生效，但不能跨兄弟节点。
多个group嵌套时，修饰符绑定的是最近的group祖先
当DOM结构较深时，容易误以为group-hover会响应最外层容器的hover，实际它只认离自己最近的那个group。常见错误是把group加在太外层，结果内部某个中间容器也带group，导致子元素响应错层。
- ✅ 正确：每个需要独立联动逻辑的区域单独加
group - ❌ 错误：全用一个顶层
group，然后靠深度选择器模拟多级响应（Tailwind不支持） - ⚠️ 注意：
group-focus、group-active同理，触发状态必须落在对应group容器内
group不支持伪元素和兄弟选择器，替代方案要手动补类
Tailwind的group修饰符本质是编译期生成CSS的:is(.group:hover) .group-hover:xxx规则，它无法生成.group:hover + .sibling或.group:hover::before这类选择器。如果真需要兄弟联动或伪元素响应，得换思路：
- 用
peer修饰符替代——把目标元素提前并加peer，触发元素加peer-hover:xxx - 伪元素需求（如hover时显示三角箭头）只能用
before:content-['']配合group-hover:before:opacity-100，但前提是before样式已定义在该元素上 - 复杂状态组合（如hover+focus）需叠加写：
group-hover:group-focus:scale-105，顺序不影响，但两者都得满足
性能与构建体积：慎用深层嵌套的group变体
每多一个group修饰符（如group-even、group-first），Tailwind都会生成额外CSS规则。尤其在动态列表中大量使用group-hover+group-focus+group-disabled组合时，CSS体积增长明显，且浏览器重绘开销上升。
- 建议只保留真实需要的状态组合，删掉未使用的
group-变体（在tailwind.config.js的corePlugins里关掉不用的） - 移动端慎用
group-hover——触摸设备无hover态，用户可能完全感知不到效果 - 动画类（如
group-hover:transition）必须搭配duration-和ease-才生效，否则切换突兀
真正卡住的往往不是语法，而是没想清楚「谁触发」「谁响应」「边界在哪」——group的约束很明确，越早按这个逻辑组织DOM，后面就越少返工。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
