Components

Forms

Form controls are styled like any element: borders and padding for the field, a focus ring for accessibility, and spacing utilities for layout.

A styled login form

Labels, inputs with focus rings, and a submit button

Example

<form class="max-w-sm space-y-4 bg-white p-6 rounded-xl shadow">
  <div>
    <label class="block text-sm font-semibold text-gray-700 mb-1">Email</label>
    <input type="email" placeholder="you@company.com"
      class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500">
  </div>
  <div>
    <label class="block text-sm font-semibold text-gray-700 mb-1">Password</label>
    <input type="password" placeholder="••••••••"
      class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500">
  </div>
  <button class="w-full bg-sky-600 hover:bg-sky-700 text-white font-semibold py-2.5 rounded-lg transition">Sign in</button>
</form>

💡

The official @tailwindcss/forms plugin resets form controls to a clean baseline that is easy to style — see the Plugins lesson.

Forms

A styled login form

Related Tailwind Topics