Tailwind CSS Forms: Inputs, Focus Rings and Validation States

Quick answer: Tailwind styles forms with the same utilities you use everywhere else. Give every field one shared class list — rounded-md border border-slate-300 px-3 py-2 — then add focus-visible:ring-2 for an accessible focus state and user-invalid: for validation that appears only after a visitor has actually touched a field. This guide builds a working signup form and explains each piece, including the one variant that solves the red-border-from-the-start problem.

One class list, shared by every field

Forms get ugly because every input is styled separately and they drift apart. The fix is to decide the field styling once and apply the same list to inputs, selects and textareas. There is no built-in component to inherit from, so you either repeat the list or, better, define it once and reuse it.

<input class="w-full rounded-md border border-slate-300 px-3 py-2 text-slate-900
              placeholder:text-slate-400
              focus-visible:border-teal-500 focus-visible:outline-none
              focus-visible:ring-2 focus-visible:ring-teal-500/40" />

Read it as four decisions: w-full so the field fills its container, a rounded border for shape, padding that makes it comfortable to type into, and a focus treatment that is visible against the page. In Tailwind v4 you can wrap that list in an @utility named field-base once and write class="field-base" on every field, which keeps the markup short without falling back to @apply in your markup.

A focus state keyboard users can actually see

The default browser outline is often removed by a global outline: none somewhere in a theme. If you remove it, you owe the user something better, and the ring utilities are that something. A ring is a solid outline that sits outside the border, so it does not shift layout when it appears.

Use focus-visible: rather than focus: wherever you can. The browser only applies it when the field was reached by keyboard, so mouse clicks stay clean while keyboard and screen-reader users still get a clear indicator.

Validation that waits its turn

The most common form complaint is a field that turns red the moment the page loads, before the visitor has typed anything. Native validation has the same problem if you style :invalid directly, because an empty required field is invalid from the start.

user-invalid: solves it. The browser only matches it after the user has interacted with the field and left it in an invalid state, which is exactly when a warning is useful.

<input type="email" required
  class="w-full rounded-md border border-slate-300 px-3 py-2
         invalid:border-transparent
         user-invalid:border-red-500 user-invalid:text-red-600
         focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500/40" />

Pair the red border with a message. A border alone is not enough, because colour alone fails for a large share of visitors, and the error text also needs to explain what to fix.

<p class="mt-1 hidden text-sm text-red-600 peer-invalid:block">
  Enter a valid email address, for example name@example.com.
</p>

peer-invalid:block needs the input to carry peer in its class list. The message then appears only when the input fails validation, with no JavaScript.

Selects, textareas and the rest

A select takes the same field list, plus appearance-none if you want the arrow to be your own. A textarea wants min-h-24 resize-y so it starts tall and can be stretched. Checkboxes and radios stay small: give them size-4 accent-teal-600 and a gap-2 on the wrapping label, rather than trying to restyle them from scratch.

A complete signup form

The pieces above combine into a form that is readable, accessible and needs no JavaScript for its states. Note the label above each field and the space-y-5 on the form, which spaces the rows without touching every input.

<form class="mx-auto max-w-sm space-y-5">
  <div class="space-y-1.5">
    <label for="email" class="text-sm font-medium text-slate-700">Email</label>
    <input id="email" type="email" required peer
      class="w-full rounded-md border border-slate-300 px-3 py-2
             user-invalid:border-red-500
             focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500/40" />
    <p class="hidden text-sm text-red-600 peer-invalid:block">Enter a valid email address.</p>
  </div>

  <div class="space-y-1.5">
    <label for="plan" class="text-sm font-medium text-slate-700">Plan</label>
    <select id="plan" class="w-full rounded-md border border-slate-300 px-3 py-2">
      <option>Starter</option>
      <option>Pro</option>
    </select>
  </div>

  <button type="submit"
    class="w-full rounded-md bg-teal-600 py-2 font-medium text-white transition hover:bg-teal-700
           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-400">
    Create account
  </button>
</form>

Everything above scales: add fields by copying the wrapper div, and every state stays consistent because it comes from the same list. If you want to see the rest of this page built out, the setup part of the Tailwind series explains how the project is wired, and the buttons and pricing part covers the button states in detail.

Frequently asked questions