peer修饰符必须配合:checked或:focus等伪类使用，因为peer本身不触发状态，仅作为后续兄弟元素的上游锚点；Tailwind通过相邻兄弟选择器（~）实现peer-checked等效果，要求目标元素严格位于peer元素之后且同级，否则样式不生效。
peer修饰符为什么必须配合:checked或:focus等伪类使用
因为 peer 本身不触发任何状态，它只是为后续兄弟元素提供一个“可被监听的上游锚点”。Tailwind 的 peer-checked、peer-focus 等修饰符，本质是编译成 CSS 中的 :has() 替代方案（实际靠相邻兄弟选择器 ~ 实现），而 CSS 原生不支持“父级状态影响子级”，只能靠“已知状态的兄弟元素反向控制其他兄弟”。所以你写 peer 却没给目标元素加 peer-checked，样式根本不会响应。
常见错误现象：<input type="checkbox" class="peer hidden"><div class="peer-checked:bg-blue-500">没变化</div> —— 缺少 peer-checked: 前缀，或目标元素不是 input 的**后续兄弟**（顺序错、嵌套深、中间隔了其他元素）。
- 必须保证
peer元素和目标元素在 DOM 中是同级、且目标在peer之后（用~选择器） -
peer元素自身通常要隐藏（hidden或opacity-0），否则会干扰布局 - 仅支持有限的状态：
peer-checked、peer-focus、peer-hover、peer-disabled等，不支持自定义状态
如何让复选框控制多个不同位置的兄弟元素
一个 peer 可以联动多个后续兄弟，但每个目标都要显式加上对应修饰符。关键是 DOM 顺序：所有目标元素必须出现在 peer 元素之后，且不能被包裹在其他非兄弟容器中（比如不能一个在 div 里、另一个在隔壁 section 里）。
示例场景：点击 checkbox，同时高亮文字、显示提示、禁用按钮：
<input type="checkbox" id="agree" class="peer hidden"><label for="agree" class="peer-checked:text-blue-600">我已阅读并同意</label> <div class="peer-checked:block hidden">✅ 已确认</div> <button class="peer-checked:opacity-100 opacity-50 cursor-not-allowed peer-checked:cursor-pointer">提交</button>
- 三个目标元素都紧跟在
input后面，满足~选择器匹配条件 -
peer-checked:block和peer-checked:opacity-100是独立生效的，互不影响 - 如果想控制更远的元素，需用 wrapper 包裹它们，并把
peer放在 wrapper 外层——但此时要用group+group-checked，不是peer
peer-hover 和 peer-focus 在表单交互中的实际限制
peer-hover 要求鼠标真正悬停在 peer 元素上；peer-focus 要求该元素获得焦点（如 input 被点击或 Tab 进入）。它们不像 peer-checked 那样有明确的布尔态，容易因 DOM 结构或事件冒泡出问题。
典型踩坑点：
-
peer-hover对label无效——label 默认无 hover 区域，除非加display:block或设宽高 -
peer-focus在input失焦后立即失效，无法“保持”状态；若需持久反馈，得配合 JS 切换 class - 移动端没有 hover，
peer-hover在 iOS/Android 上基本不可靠，别用于核心功能 - focus-visible 未被 Tailwind 原生支持，
peer-focus-visible需手动配置或用插件
为什么有时 peer-checked 不生效？检查这三点
最常卡住的地方就这三个，按顺序排查比重写更快：
-
DOM 顺序不对：目标元素不在
peer元素之后，或中间隔着其他标签（比如<input class="peer"><p>xxx</p> <div class="peer-checked:bg-red-500"></div>——p阻断了兄弟关系） -
peer 元素不可交互/无状态：比如用了
div class="peer"，但 div 没有:checked状态；必须是原生表单控件（input[type=checkbox]、input[type=radio]、select等） -
Tailwind 版本太低：
peer-系列修饰符在 v3.0+ 才稳定支持，v2.x 需手动启用peer变体（variants: { extend: { ... } }）
复杂点在于：它依赖 CSS 相邻选择器，而浏览器对嵌套深度、动态插入节点、Shadow DOM 都有兼容性边界。一旦结构稍复杂，就该考虑用 JS 控制 class，而不是硬撑 peer。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
