Interactive Forms with Validation Styling

1. Styling Valid & Invalid Inputs

Use :invalid, :valid, and :required pseudo-classes to style form controls based on their validation state.

<input type="email" required
  class="peer w-full border rounded px-3 py-2 
         border-gray-300 focus:outline-none 
         focus:ring-2 focus:ring-blue-500
         invalid:border-red-500 invalid:text-red-600
         valid:border-green-500 valid:text-green-600"
/>
            

2. Showing Error Messages

You can use the .peer class to conditionally show error messages:

<div>
  <input type="text" required class="peer w-full border px-3 py-2 border-gray-300 
       invalid:border-red-500 invalid:ring-red-500">
  <p class="mt-1 text-sm text-red-600 invisible peer-invalid:visible">
    This field is required.
  </p>
</div>
            

3. Interactive Example

Here's a full form example with validation feedback:

<form class="space-y-4">
  <div>
    <label class="block text-sm font-medium text-gray-700">Email</label>
    <input type="email" required class="peer w-full mt-1 px-3 py-2 border border-gray-300 
         rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 
         invalid:border-red-500">
    <p class="text-red-500 text-sm mt-1 invisible peer-invalid:visible">
      Please enter a valid email address.
    </p>
  </div>

  <div>
    <label class="block text-sm font-medium text-gray-700">Password</label>
    <input type="password" minlength="6" required 
      class="peer w-full mt-1 px-3 py-2 border border-gray-300 
             rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 
             invalid:border-red-500">
    <p class="text-red-500 text-sm mt-1 invisible peer-invalid:visible">
      Password must be at least 6 characters.
    </p>
  </div>

  <button type="submit" 
    class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
    Submit
  </button>
</form>
            

4. Accessibility Tips

• Always associate labels with inputs using <label>.
• Use aria-invalid for screen reader feedback if needed.
• Use required, minlength, etc., for built-in HTML validation.

Conclusion

With Tailwind and modern HTML features, you can create fully interactive, validated, and accessible forms using just utility classes — without writing custom CSS.