Creating Responsive Forms with Tailwind CSS: A Practical Guide

Heads up, this content is in beta. Use at your own risk!

Forms are essential for any website that collects user information. In this guide, we’ll create a responsive form using Tailwind CSS.

Here’s a basic contact form with input fields for the name, email, and a message:

HTML

Code

<div class="w-full max-w-xs mx-auto">
  <form class="px-8 pt-6 pb-8 mb-4 bg-white rounded">
    <div class="mb-4">
      <label class="block mb-2 text-sm font-bold text-gray-700" for="name">
        Name
      </label>
      <input
        class="w-full px-3 py-2 leading-tight text-gray-700 border rounded appearance-none focus:outline-none"
        id="name"
        type="text"
        placeholder="Your Name"
      />
    </div>
    <div class="mb-4">
      <label class="block mb-2 text-sm font-bold text-gray-700" for="email">
        Email
      </label>
      <input
        class="w-full px-3 py-2 leading-tight text-gray-700 border rounded appearance-none focus:outline-none"
        id="email"
        type="email"
        placeholder="Your Email"
      />
    </div>
    <div class="mb-6">
      <label class="block mb-2 text-sm font-bold text-gray-700" for="message">
        Message
      </label>
      <textarea
        class="w-full px-3 py-2 leading-tight text-gray-700 border rounded appearance-none focus:outline-none"
        id="message"
        placeholder="Your Message"
      ></textarea>
    </div>
    <div class="flex items-center justify-between">
      <button
        class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none"
        type="submit"
      >
        Send
      </button>
    </div>
  </form>
</div>

In this example, the form is placed within a container that controls its maximum width (max-w-xs) and centers it (mx-auto). The form itself has a white background (bg-white), rounded corners (rounded) and padding (px-8 pt-6 pb-8 mb-4).

Each form field is within a div that includes a label and an input (or textarea). The inputs/textarea have a border (border), rounded corners (rounded), full width (w-full), vertical and horizontal padding (py-2 px-3), and text styling (text-gray-700 leading-tight).

Finally, the “Send” button at the end of the form is styled similarly to the inputs, with additional color classes to make it blue (bg-blue-500 hover:bg-blue-700 text-white).

Related posts