? Focus and Validation Styles in Tailwind CSS

Tailwind CSS provides utilities to style focus states (important for accessibility) and validation feedback (like showing error or success styles on form inputs).

1. Focus Styles

Focus styles help users see which element is currently active, especially for keyboard navigation.

Basic Focus Styling

<input  class="border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"  type="text"  placeholder="Focus me"/>

• focus:outline-none: removes default browser outline

• focus:ring-2 focus:ring-blue-500: adds a blue ring glow on focus

• focus:border-blue-500: changes border color on focus

Focus Visible (for keyboard only)

Use focus-visible to show focus styles only when focused via keyboard (not mouse).

<input  class="border border-gray-300 rounded px-3 py-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500"  type="text"/>

2. Validation Styles

You can style inputs conditionally based on validation status (error, success) by toggling classes, typically via JavaScript or server logic.

Example: Error State

<input  class="border border-red-500 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-red-500"  type="text"  placeholder="Error state"/><p class="text-red-600 text-sm mt-1">This field is required.</p>

• Red border and red focus ring indicate error

• Optional error message below input

Example: Success State

<input  class="border border-green-500 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-500"  type="text"  placeholder="Success state"/><p class="text-green-600 text-sm mt-1">Looks good!</p>

3. Using Peer for Live Validation Styling

You can use the peer class to style sibling elements based on input state:

<div>  <input type="text" id="email" class="peer border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2" />  <p class="peer-invalid:block hidden text-red-600 text-sm mt-1">Invalid email</p></div>

• This requires native HTML5 validation attributes like required or type="email"

• peer-invalid:block shows the message if input is invalid

Summary

Want a demo form example with focus and validation styles combined?