peer选择器必须配合peer类和紧邻的后兄弟元素使用，控制源（如checkbox）加peer，目标元素用peer-checked等变体；不可用于前兄弟、父子或隔级元素，也不支持嵌套穿透。
peer选择器必须配合peer类和兄弟元素使用
Tailwind的peer不是独立生效的样式，它本身不产生任何CSS规则，只是给元素打上一个“可被邻近选择器定位”的标记。真正起作用的是peer-checked、peer-hover这类变体，它们只对**紧跟在peer元素之后的同级元素**生效。
常见错误是把peer加在目标元素上（比如想让按钮响应复选框状态，却给按钮加peer），结果样式完全不触发。正确做法是：控制源（如<input type="checkbox">）加peer，被影响的目标（如<label></label>或<div>）用<code>peer-checked:xxx等修饰。
-
peer必须出现在目标元素的**前一个兄弟节点**，不能隔标签，也不能是父/子关系 - 支持的变体包括：
peer-checked、peer-hover、peer-focus、peer-disabled、peer-required等，对应原生表单状态 - 若目标元素不是紧邻的下一个兄弟，可以用
group+group-hover替代，但逻辑不同
复选框联动文字颜色与背景的典型写法
这是最常用场景：点击复选框时，让旁边的说明文字变色或高亮。关键在于结构顺序和类名组合。
<div class="flex items-center gap-2">
<input type="checkbox" class="peer hidden" id="agree" />
<label for="agree" class="peer-checked:text-blue-600 peer-checked:bg-blue-50 px-3 py-1 rounded text-sm">
我已阅读并同意条款
</label>
</div>
注意三点：
立即学习“前端免费学习笔记（深入）”；
-
hidden必须加在<input>上，否则默认复选框会显示，且peer类对可见表单控件更稳定 -
peer-checked:前缀只能写在<label></label>上，不能写在<input>自己身上 - 如果
<label></label>里还包了其他元素（比如图标），要确保peer-checked:类作用在最外层容器，否则内部子元素不会继承状态样式
radio组中高亮当前选项卡片
单选按钮组常用于选项卡或设置项，用peer可以避免JS，纯CSS实现“选中即高亮”效果。
结构上，每个<input type="radio">都要带peer，且每个对应的卡片必须紧跟其后：
<div class="space-y-2">
<input type="radio" name="plan" value="basic" class="peer hidden" id="basic" />
<label for="basic" class="peer-checked:border-blue-500 peer-checked:ring-2 peer-checked:ring-blue-200 border p-4 rounded-lg cursor-pointer">
基础版
</label>
<input type="radio" name="plan" value="pro" class="peer hidden" id="pro" />
<label for="pro" class="peer-checked:border-blue-500 peer-checked:ring-2 peer-checked:ring-blue-200 border p-4 rounded-lg cursor-pointer">
专业版
</label>
</div>
容易忽略的点：
- 所有
radio必须有相同的name属性，否则无法互斥，peer-checked也不会正确切换 - 不能用
peer-*:xxx去影响前面的兄弟（比如想让标题随radio变化，但标题在<input>之前），这时得换用group或JS - 移动端点击区域小，建议给
<label></label>加cursor-pointer并确保足够尺寸，否则用户点不中
为什么peer-group不存在？别混淆peer和group
Tailwind没有peer-group这个概念，这是初学者常搜错的关键词。两者解决的问题不同：group用于“父容器 hover 时影响子元素”，peer用于“前一个兄弟元素状态变化时影响后一个兄弟元素”。
例如，你想让鼠标悬停在卡片整体时才显示删除按钮，该用group：
<div class="group p-4 border rounded"> <p>内容文本</p> <button class="opacity-0 group-hover:opacity-100 transition-opacity">删除</button> </div>
而如果你有一个开关<input>和它右边的描述块，才轮到peer。混用会导致样式完全不生效，因为它们依赖的DOM关系完全不同。
真正复杂的地方在于嵌套交互——比如一个peer-checked元素内部又包含需要响应hover的按钮，这时得叠加group，但peer本身不支持嵌套穿透。这种时候，CSS变量或轻量JS反而更可控。
