Tailwind CSS cookbook · Beginner
Lay out a two-column settings form
Build a clean, accessible form with labels, help text, inputs side by side on wide screens and stacked on phones.
Approach
Use a grid that becomes two columns from sm: with sm:col-span-2 for full-width fields. Every input gets a
<label>, a clear focus style, and help text connected with aria-describedby.
Solution
<form class="m-6 grid max-w-2xl gap-5 sm:grid-cols-2">
<div>
<label for="first" class="block text-sm font-medium">First name</label>
<input id="first" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 focus:outline-hidden">
</div>
<div>
<label for="last" class="block text-sm font-medium">Last name</label>
<input id="last" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 focus:outline-hidden">
</div>
<div class="sm:col-span-2">
<label for="mail" class="block text-sm font-medium">Email</label>
<input id="mail" type="email" aria-describedby="mail-help" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 focus:outline-hidden">
<p id="mail-help" class="mt-1 text-sm text-slate-500">We'll never share it.</p>
</div>
<div class="flex justify-end gap-3 sm:col-span-2">
<button type="button" class="rounded-lg px-4 py-2 font-medium ring-1 ring-slate-300">Cancel</button>
<button class="rounded-lg bg-indigo-600 px-4 py-2 font-medium text-white hover:bg-indigo-500">Save</button>
</div>
</form>
Pitfalls
- Placeholders instead of labels: they disappear while typing and are often low-contrast.
- Repeating long input class lists; extract an
Inputcomponent.
Variations
- Add
@plugin "@tailwindcss/forms";for consistent base styles across browsers. - Show errors with
user-invalid:and apeer-user-invalid:message.
Further reading: Tailwind CSS docs
Reference: https://tailwindcss.com/docs/hover-focus-and-other-states#form-states