Peer类是CSS选择器语法糖，通过同级紧邻的.peer元素状态（如:checked、:focus）透传至后续兄弟元素，需严格满足结构要求且仅对可交互原生表单控件生效。
Peer类怎么让兄弟元素响应状态变化
Peer类本质是CSS选择器的语法糖，它把 .peer 元素的状态（比如 :checked、:focus）“透传”给紧随其后的兄弟元素（用 .peer-[state]:[modifier] 控制）。关键在于：必须是**同级、紧邻、.peer 在前**，否则完全不生效。
- 常见错误：把
<input class="peer">放在<label></label>里，或放在目标元素后面 → 状态无法触发 - 正确结构示例：
<input type="checkbox" class="peer hidden"> <div class="peer-checked:bg-blue-500 ...">被勾选时变蓝</div>
-
.peer必须是可触发伪类的元素（<input>、<button></button>、带tabindex的<div>），纯文本或无交互元素无效 <h3>表单校验提示如何随输入框状态自动显隐</h3> <p>利用 <code>.peer-focus+.peer-invalid组合，能实现「聚焦时显示提示框」「失焦且验证失败时标红」这类效果，全程不用JS监听事件。- 场景限制：仅对原生表单控件有效（
<input type="email">、<select></select>），自定义组件需手动加invalid属性 - 注意浏览器默认验证行为：某些情况（如空必填字段）会自动设
invalid，但有些需配合required或pattern才触发 - 典型写法：
<input type="email" required class="peer border-gray-300"> <p class="hidden peer-focus:block peer-invalid:text-red-500">请输入有效邮箱</p>
为什么Checkbox/Radio联动按钮常失效
根本原因常是HTML结构或状态映射错位。Checkbox和Radio本身不支持
:valid/:invalid，得靠:checked，而按钮默认不可聚焦，所以不能用peer-focus。- 必须用
.peer-checked控制按钮样式，例如：<input type="checkbox" id="agree" class="peer hidden"> <label for="agree">我同意</label> <button class="peer-checked:bg-green-600 peer-checked:cursor-pointer">提交</button>
- 如果按钮需要禁用/启用，得用
disabled属性 +.peer-checked:enabled，但CSS无法修改属性值，只能控制样式；真正禁用仍需JS或表单提交拦截 - 移动端点击区域小：隐藏
.peer后，务必用<label for="id"></label>扩大可点范围，否则用户点不到
性能和兼容性要注意什么
Tailwind的Peer类最终编译为标准CSS选择器（如
.peer:checked ~ .peer-checked\:bg-blue-500），所以性能取决于浏览器对相邻兄弟选择器的优化程度，现代浏览器基本无感，但老版本Safari（.peer-[state] 支持不全。立即学习“前端免费学习笔记（深入）”；
- 不支持的场景：IE全系、旧版Android WebView、部分邮件客户端内嵌渲染引擎
- 构建时Tailwind默认只生成你实际用到的Peer变体，但如果写了
peer-hover却没在HTML中加hover类，它不会生效——因为没有对应伪类触发源 - 调试技巧：打开DevTools，检查目标元素是否真的匹配了生成的选择器；若没生效，优先查HTML顺序和元素是否可触发状态
最易忽略的是：Peer类只响应**直接兄弟**，中间插一个注释、文本节点或空格都会断开关系。写完务必看DOM树结构，别信编辑器里的换行缩进。
- 场景限制：仅对原生表单控件有效（
