TailwindPeer类实现表单联动技巧

Tailwind CSS 的 Peer 类是一种强大而精巧的纯 CSS 表单联动方案，它通过同级紧邻的 `.peer` 元素状态（如 `:checked`、`:focus`、`:invalid`）自动触发后续兄弟元素的样式变化，无需一行 JavaScript 即可实现勾选变色、输入校验提示显隐、按钮启用/禁用态切换等交互效果；但其威力严格依赖正确的 HTML 结构（`.peer` 必须在前、紧邻、同级）和原生表单语义（仅对 ``、``、`` 等可触发伪类的元素生效），稍有错位或误用于自定义组件便会失效——掌握这些隐藏规则，你就能用最轻量的方式写出高响应性、易维护且性能优异的表单体验。

Peer类怎么让兄弟元素响应状态变化

Peer类本质是CSS选择器的语法糖，它把 .peer 元素的状态（比如 :checked、:focus）“透传”给紧随其后的兄弟元素（用 .peer-[state]:[modifier] 控制）。关键在于：必须是**同级、紧邻、.peer 在前**，否则完全不生效。

• 常见错误：把 放在 里，或放在目标元素后面 → 状态无法触发
• 正确结构示例：

  
  被勾选时变蓝

• .peer 必须是可触发伪类的元素（、、带 tabindex 的
  ），纯文本或无交互元素无效

表单校验提示如何随输入框状态自动显隐

利用 .peer-focus + .peer-invalid 组合，能实现「聚焦时显示提示框」「失焦且验证失败时标红」这类效果，全程不用JS监听事件。

• 场景限制：仅对原生表单控件有效（、），自定义组件需手动加 invalid 属性
  注意浏览器默认验证行为：某些情况（如空必填字段）会自动设 invalid，但有些需配合 required 或 pattern 才触发
  典型写法：

  请输入有效邮箱

为什么Checkbox/Radio联动按钮常失效