Styling Inputs, Selects, and Buttons in Tailwind

1. Input Fields

Here’s a styled text input with Tailwind utilities:

<input type="text" placeholder="Your Name"
  class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            

2. Select Boxes

Customize the look of native dropdowns:

<select
  class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
  <option>Option 1</option>
  <option>Option 2</option>
</select>
            

3. Buttons

Buttons can be styled for different states:

<button
  class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400">
  Submit
</button>
            

4. Full Form Example

A compact form layout using grid and spacing:

<form class="grid gap-4 max-w-md">
  <input type="email" placeholder="Email"
    class="px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500">

  <select class="px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500">
    <option>Choose role</option>
    <option>Student</option>
    <option>Instructor</option>
  </select>

  <button type="submit"
    class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition">
    Sign Up
  </button>
</form>
            

5. Styling Tips

• Use focus: classes to enhance accessibility.
• Apply consistent spacing using px-, py-, gap-.
• Use transition utilities like hover: and focus: to improve UX.
• Use Tailwind Forms Plugin for better cross-browser styles (optional).