Styling Forms with Tailwind

HTML form elements need consistent base styles across browsers. Apply base styles manually or use the @tailwindcss/forms plugin for clean resets.

Text input

<div class="space-y-1">
  <label class="block text-sm font-medium text-gray-700">Email</label>
  <input type="email" placeholder="you@example.com"
    class="block w-full px-3 py-2 border border-gray-300 rounded-md text-sm
    placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500
    focus:border-blue-500" />
</div>

Error state

<input type="email"
  class="block w-full px-3 py-2 border border-red-300 rounded-md text-sm
  focus:outline-none focus:ring-2 focus:ring-red-500" />
<p class="text-sm text-red-600 mt-1">Please enter a valid email.</p>

Select and textarea

<select class="block w-full px-3 py-2 border border-gray-300 rounded-md
  text-sm bg-white focus:ring-2 focus:ring-blue-500">
  <option>Option 1</option>
</select>

<textarea rows="4" class="block w-full px-3 py-2 border border-gray-300
  rounded-md text-sm resize-none focus:ring-2 focus:ring-blue-500"></textarea>

Swap border-gray-300 focus:ring-blue-500 for border-red-300 focus:ring-red-500 to signal validation errors. The pattern stays identical — only the color changes.