Tailwind CSS
/Intermediate
Validation States
Definition
Using Tailwind classes to visually communicate to the user whether their form input is valid (green), invalid (red), or required.
Explain Like I'm New
If the user types a bad password, the input border should turn red and a red error message should appear. You can control this dynamically in React, or you can use pure CSS HTML5 validation states like `invalid:border-red-500`.
Real World Example
An email input field that naturally has a gray border, but instantly turns red the moment the user types something that isn't an email address.
Common Use Cases
- •Form validation feedback
Interactive Example
Interview Questions
basic
- What variant prefix applies styles only when a form input contains an error?
intermediate
- Does `invalid:border-red-500` require JavaScript to work?