在tailwind css中，使用 peer 类实现纯css表单校验提示的核心做法是：将 peer 类添加到表单输入元素（如 ）上，然后在相邻的兄弟元素（通常是用于显示错误信息的 或 ）上使用 peer-* 变体类（如 peer-invalid:hidden、peer-valid:block 等）。当输入框的状态改变时，浏览器会自动更新这些兄弟元素的样式，无需任何javascript代码。
如何根据输入有效性显示或隐藏错误信息？
要实现根据输入有效性显示或隐藏错误信息，可以利用HTML5原生验证属性与Tailwind的 peer-invalid 和 peer-valid 伪类。具体做法是在 标签上添加 peer 类，并确保该输入具有必要的验证属性（如 required、type="email" 等）。然后，在紧随其后的错误提示元素上，应用 peer-invalid:block 来在无效时显示，以及 peer-valid:hidden 来在有效时隐藏。这种方法依赖于浏览器对表单验证状态的内置支持，Tailwind仅负责样式的切换。
<div class="relative">
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" id="email" required class="peer mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"><p class="peer-invalid:block peer-valid:hidden text-red-600 text-sm mt-1">
Please enter a valid email address.
</p>
</div>
上述代码中，peer-invalid:block 确保当输入不符合验证规则时，错误信息以块级元素显示。peer-valid:hidden 则在输入有效时隐藏错误信息。这种组合确保了只有在输入无效时才看到错误提示，从而提供清晰的反馈。
如何为不同类型的输入定制不同的视觉反馈？
为了为不同类型的输入定制不同的视觉反馈，可以结合使用 peer-focus、peer-invalid 和 peer-valid 类。例如，可以为密码输入设置强度指示器，或者为电话号码输入设置格式提示。关键在于为每个输入类型定义特定的兄弟元素，并应用相应的 peer-* 类。这样，当用户与特定类型的输入交互时，相关的视觉反馈会立即出现，提升用户体验。
<div class="relative">
<label for="password" class="block text-sm font-medium text-gray-700">Password</label>
<input type="password" id="password" required minlength="8" class="peer mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"><p class="peer-invalid:block peer-valid:hidden text-red-600 text-sm mt-1">
Password must be at least 8 characters long.
</p>
<p class="peer-focus:block peer-blank:hidden text-blue-600 text-sm mt-1">
Hint: Use a mix of letters, numbers, and symbols.
</p>
</div>
在这个例子中，peer-focus:block 使得当输入框获得焦点时，提示信息显示出来，而 peer-blank:hidden 则在输入框有内容时隐藏该提示。同时，peer-invalid:block 和 peer-valid:hidden 继续处理验证状态下的错误信息显示。这种多层次的反馈机制允许开发者为每种输入类型提供高度定制的交互体验。
当输入框为空时，如何显示占位符提示？
当输入框为空时，可以通过 peer-placeholder-shown 伪类来显示占位符提示。具体做法是在 元素上添加 peer 类，并在其兄弟元素上使用 peer-placeholder-shown:block 来显示占位符文本。当用户开始输入时，占位符提示会自动隐藏。这种方法利用了浏览器对占位符行为的原生支持，通过Tailwind的 peer-* 类实现了无缝的样式切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
