必须使用 appearance: none 隐藏原生复选框样式，否则后续自定义样式会与浏览器默认样式冲突；在 tailwind 中需通过 @layer base 注入该规则，并配合 peer/peer-checked 实现可访问、响应式、无障碍的定制复选框。
直接用 appearance: none 隐藏原生样式是前提
不加这句，所有后续样式都会和浏览器默认复选框打架。Tailwind 默认不会帮你关掉它，必须手动覆盖。常见错误是只调 opacity: 0 或 visibility: hidden，结果点击失效或键盘不可聚焦——appearance: none 才真正剥离渲染逻辑，保留可访问性。
在 Tailwind 中，你得通过 @layer base 注入这条规则，不能只靠工具类：
@layer base {
input[type='checkbox'] {
appearance: none;
}
}
注意：@layer base 必须写在 @tailwind base 之后，否则被插件（比如 @tailwindcss/forms）的默认样式覆盖。
用 peer + peer-checked 控制状态样式
Tailwind 的 peer 机制比传统 :checked + .custom-checkbox 更可靠，尤其在复杂嵌套或动态渲染时。关键点是：原生 <input> 必须紧跟在自定义容器之前，且共用同一个父级 <label></label>。
-
<input type="checkbox" class="peer hidden">——hidden只是视觉隐藏，不影响语义和焦点 -
<div class="w-5 h-5 rounded border peer-checked:bg-blue-500 peer-checked:border-blue-500"></div>—— 这个div会响应peer-checked状态 - 别漏掉
transition-colors，否则状态切换生硬
图标要用 peer-checked:block 而不是 JavaScript
打勾图标不需要 JS 控制显隐，纯 CSS 就够了。把 SVG 放进自定义容器里，用 hidden + peer-checked:block 切换：
<div class="w-5 h-5 rounded border border-gray-300 flex items-center justify-center peer-checked:bg-blue-500 peer-checked:border-blue-500 transition-colors"> <svg class="w-3 h-3 text-white hidden peer-checked:block" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg> </div>
这个写法兼容屏幕阅读器，也避免了事件监听开销。如果项目用了深色模式，记得给 stroke 和 fill 加上 dark: 变体。
禁用状态和焦点样式容易被忽略
disabled 和 :focus 不是可选项，而是无障碍刚需。很多人只处理了正常和选中态，结果测试时发现键盘 Tab 无法聚焦，或者禁用后视觉没变化。
- 加
peer-disabled:opacity-50 peer-disabled:cursor-not-allowed到自定义容器 - 焦点样式建议用
focus:ring-2 focus:ring-offset-2 focus:ring-blue-500，但必须确保@tailwindcss/forms插件没强行覆盖它——此时回到@layer base写input[type='checkbox']:focus更稳妥 - 如果用了
@tailwindcss/forms，它的默认 focus ring 是蓝色，想改就得在@layer base里重置outline和ring相关属性
最麻烦的其实是 Safari —— 它对 appearance: none 的支持有延迟，偶尔需要额外加 -webkit-appearance: none 才彻底生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
