Styling Forms and Inputs

Forms are one of the most common UI elements in frontend applications. Good form styling improves readability, usability, and accessibility while helping interfaces feel more polished.

Tailwind provides utility classes that make form styling fast and consistent.

Styling a Basic Input

Open App.svelte and add the following code:

<input
  class="
    border
    border-gray-300
    rounded-lg
    p-3
    w-full
  "
  placeholder="Enter your email"
/>

The utility classes control:

• Borders;
• Padding;
• Rounded corners;
• Width.

This creates a cleaner and more modern input field.

Styling Labels and Form Layouts

Forms usually contain labels and grouped spacing.

<div class="space-y-2">
  <label class="font-medium">
    Email Address
  </label>

  <input
    class="
      border
      border-gray-300
      rounded-lg
      p-3
      w-full
    "
    placeholder="Enter your email"
  />
</div>

The space-y-2 utility adds vertical spacing between elements.

Styling Focus States

Interactive focus styling improves accessibility and usability.

<input
  class="
    border
    border-gray-300
    rounded-lg
    p-3
    w-full
    focus:outline-none
    focus:ring-2
    focus:ring-purple-500
  "
  placeholder="Enter password"
/>

The purple ring appears when the input receives focus.

Styling Validation States

Tailwind also works well for validation feedback.

<input
  class="
    border
    border-red-500
    rounded-lg
    p-3
    w-full
  "
  placeholder="Invalid input"
/>

<p class="text-red-500 text-sm">
  This field is required.
</p>

This helps users quickly identify form errors.