peer伪类可实现无js的状态联动，要求原生表单控件紧邻带peer类的容器，通过peer-checked等修饰符控制样式，兼顾可访问性与跨浏览器兼容性。
用 peer 伪类实现无 JS 的状态联动
Tailwind 自带的 peer 机制是自定义表单控件最轻量、最可靠的方式。它不依赖 JS，也不需要额外包装元素，靠相邻兄弟选择器（+ .peer）触发样式变化。
关键点在于：原生 <input type="checkbox"> 或 <input type="radio"> 必须紧跟在自定义容器元素之前，且该容器需加 peer 类；再用 peer-checked:、peer-disabled: 等修饰符控制视觉反馈。
- 必须隐藏原生控件：
class="sr-only"或class="hidden"（推荐sr-only，兼顾可访问性） - 自定义容器必须是
<input>的**紧邻下一个兄弟元素**，不能隔标签，也不能用flex包裹后打乱 DOM 顺序 -
peer-checked:bg-blue-500这类写法只对直接兄弟生效，嵌套层级里无效 - 支持
peer-indeterminate:（三态复选框）、peer-disabled:、peer-invalid:等，比纯 CSS:checked更丰富
为什么不用 appearance-none 直接改原生控件？
appearance-none 只能移除默认样式，但无法真正“重绘”复选框或单选框的内部结构——比如勾选图标、圆点填充、边框动画等，浏览器仍会保留不可控的渲染逻辑（尤其在 Safari 和旧版 Edge 中）。强行用 border-radius、background 覆盖，容易出现对齐错位、点击热区偏移、焦点 outline 不跟随等问题。
更实际的限制：
-
appearance-none对input[type="checkbox"]在部分 Android WebView 中失效 - 无法通过 Tailwind 类控制“半选中”（indeterminate）状态的视觉表现
- 没有过渡动画支持：
transition无法作用于原生控件的伪元素（如::before） - 无障碍属性（如
aria-checked）需手动同步，而peer方案天然绑定原生状态
带 SVG 图标的复选框怎么写才不卡顿？
用内联 <svg></svg> 替代背景图或字体图标，能避免加载延迟和字体抗锯齿问题，但要注意尺寸与对齐细节。
常见错误是 SVG 宽高写死导致缩放失真，或未设 viewBox 导致渲染模糊。
- SVG 必须设
width和height为100%，并配合viewBox="0 0 24 24"保证清晰度 - 图标颜色建议用
fill="currentColor"，这样可通过text-green-500统一控制颜色 - 用
peer-checked:block控制显隐比opacity更高效，避免重绘 - 示例结构：
<input type="checkbox" class="sr-only peer"><div class="w-5 h-5 border rounded flex items-center justify-center peer-checked:bg-green-500 peer-checked:border-green-500"> <svg class="w-3 h-3 text-white hidden peer-checked:block" fill="currentColor" viewbox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg> </div>
兼容性与可访问性最容易被忽略的三点
很多自定义方案在桌面 Chrome 上看着完美，一到 iOS Safari 或屏幕阅读器里就出问题。核心陷阱不在样式，而在语义和交互链路。
- 必须用
<label></label>包裹整个结构（或配for+id），否则点击文字区域无法触发选中 —— 单靠cursor-pointer不解决根本问题 - 禁用状态（
disabled）下，不仅要加peer-disabled:opacity-50，还得确保<input>元素本身有disabled属性，否则键盘 Tab 仍能聚焦、屏幕阅读器会误报“可操作” - 三态复选框（indeterminate）需手动设置
indeterminate属性（JS），且 Tailwind 的peer-indeterminate:仅在该属性存在时生效 —— 这个属性无法通过 HTML 属性声明，必须 JS 设置
peer 链路写稳、语义标签补全、禁用/三态状态手动同步好，剩下的样式调整反而很快。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
