Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

How to Create a Responsive Form Using Tailwind Forms

Are you looking to create responsive forms for your web project that use Tailwind CSS? Forms are an important part of many web applications. They allow site owners to collect information and interact with their users.

Whether you want to allow user registration or collect emails for your site’s newsletter, you’ll need to create a form on your site. And given that most users access websites using their smartphones, you’ll need to make your form responsive and mobile-friendly.

In this tutorial, we’ll cover how Tailwind Forms work and then show you how to create forms using the Tailwind Forms plugin. We’ll go further to show how to create a login and registration form, explaining every important detail. Let’s begin.

How Tailwind Forms Work

By default, Tailwind CSS doesn’t provide an out-of-the-box form solution. However, it does allow you to apply utility classes to HTML form elements on your web page.

This means you can create a form using the <form> tag in HTML, then apply some of the classes Tailwind provides to style your form.

Using Tailwind utility classes may work when styling basic forms with text input type. However, if your form requires checkboxes or radio buttons, the styles may not apply as you’d like.

Fortunately, the Tailwind Forms plugin adds styles to form fields once you install the plugin on your project.

Setting Up Tailwind CSS

Although you can use Tailwind CSS on a vanilla HTML and CSS project, we’ll be integrating it with a React application. The styles and classes would still apply regardless of the JavaScript framework you use.

Prerequisite

Before you start, ensure you have the following prerequisites in place:

  • Node.js and npm (Node Package Manager) are installed on your computer.

  • A basic understanding of HTML and React.

If you need a refresher on React, check out the video below.

Installing Tailwind and React

For this tutorial, we’ll be installing Tailwind CSS on a new React app. If you’d like to integrate it with your existing React app, simply skip the React installation and proceed to install Tailwind CSS.

Start by installing React on your chosen directory.

npx create-react-app form-styling

After that, run the command below to navigate to your project’s folder.

Install React
cd form-styling

Now, install Tailwind CSS by running the command below

npm install -D tailwindcss
Installing Tailwind CSS

We also recommend generating your Tailwind config file using the ‘tailwindcss init‘ command. For more details on how the configuration file works, see our Tailwind config tutorial.

Tailwind Form Elements

Forms in Tailwind are similar to HTML form components. If you understand how forms work in HTML, you can apply similar knowledge to Tailwind CSS. You just need to apply some of Tailwind’s utility classes to your form fields. Below are some of the most popular form components you’ll likely use for your project.

Input

An input element is a form control that allows users to enter data. It’s commonly used for single-line text input, such as names, usernames, email addresses, or passwords. Inputs can have different types, including text, password, email, and more, each tailored to the type of data being collected. Here is an example.

<input type="text" placeholder="Your Name" />

Here is how it looks in the frontend.

Input field example

As you can see above, the input element looks basic without any styling. Let’s apply some Tailwind utility classes to make it responsive and a bit beautiful.

<input class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 p-2 border text-gray-200 rounded-md" type="text" placeholder="Your Name" />

In the example above, p-2 adds a padding of two pixels across all sides of the input element. We use the border class to add a light grey border around the component. To make the widget responsive, we’re making the width display at full length and setting breakpoints for major screen sizes.

Styled input field

Textarea

A textarea is a form control that permits users to input multi-line text, making it suitable for longer text entries, such as comments, messages, or descriptions. It provides a larger input area for users to type or paste text.

<textarea placeholder="Your Message"></textarea>

You can use the cols and rows parameter to increase the width and height of the text area.

<textarea placeholder="Your Message" cols="30" rows="10"></textarea>
Textarea example

Let’s add the same classes we used for the input component to make the textarea widget responsive.

<textarea placeholder="Your Message" class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 p-2 border text-gray-200 rounded-md"></textarea> 
Styled textarea field

Select

A select element, often referred to as a dropdown or select box, is used for presenting a list of options to the user. Users can choose a single option from the list, making it ideal for fields like choosing a country or state from a predefined list.

<select>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>
Dropdown field example

Adding the same utility classes we used for the input and textarea fields will apply similar styles to the select component.

<select class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 p-2 border text-gray-200 rounded-md">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

However, when you preview your website, the styles will only apply to the field and not the actual dropdown. This is where using the Tailwind official forms plugin comes in handy. It provides additional form styles to beautify your form fields.

Select field styled with Tailwind CSS

Select Multiple

Similar to the select element, the select multiple element allows users to pick multiple options from a list. This is useful if you want to allow users to select multiple items from a set of choices, like selecting multiple interests or tags.

The implementation is also quite similar to the example above. You just need to add the multiple parameter to the select code we used above. Here is an example code.

<select multiple>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

In your website’s frontend, you’ll be able to select more than one item from the list.

Select multiple example

Let’s update the code above to include some Tailwind utility classes.

<select multiple class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 p-2 border rounded-md">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>
Select multiple field with Tailwind Classes

Radio button

Radio buttons are a type of form control that lets users select one option from a list of mutually exclusive choices. They are typically used in situations where only one option should be selected, such as selecting a gender or preference. Here is an example code:

<label>
  <input type="radio" name="gender" value="male" /> Male
</label>
<label>
  <input type="radio" name="gender" value="female" /> Female
</label>
Unstyled Radio button

Updating the code to include some Tailwind CSS classes.

<label class="inline-flex text-gray-700 items-center mr-4">
  <input type="radio" name="gender" value="male" class="text-blue-500" />
  <span class="ml-2">Male</span>
</label>
<label class="inline-flex text-gray-700 items-center mr-4">
  <input type="radio" name="gender" value="female" class="text-blue-500" />
  <span class="ml-2">Female</span>
</label>
Styled radio button component

Checkbox

Checkboxes are form controls that allow users to toggle an option on or off. Unlike radio buttons, checkboxes are used when users can select multiple options simultaneously, and each option is independent of the others.

Common uses of form checkbox element include agreeing to terms and conditions or selecting multiple items from a list. Below is an example code of implementing a checkbox.

<div>
 <label>
  <input type="checkbox" name="subscribe" value="yes" /> Subscribe to newsletter
 </label>
</div>
Unstyled checkbox component

Adding some Tailwind CSS classes to the code above.

<div>
 <label class="inline-flex items-center mr-4">
  <input type="checkbox" name="subscribe" value="yes" class="text-blue-500" />
  <span class="ml-2 text-gray-700">Subscribe to newsletter</span>
 </label>
</div>
Styled checkox field

Applying Tailwind CSS classes to select, radio buttons and checkboxes may not work as expected. This is because Tailwind only applies the classes to the main component. Inner components like the dropdown menu and the checkbox icon will still use the default styles.

To overcome this barrier, you should use the Tailwind Forms plugin. This plugin provides out-of-the-box styling to form elements. It also includes classes to target inner HTML components.

Using the Tailwind Forms Plugin

To get started, you’ll need to install the plugin on your React or HTML project’s root directory. For this, open a terminal window and run the command below.

npm install -D @tailwindcss/forms

After installing it, you’ll then need to register it as a requirement in your config file. For this, open the config file and add the snippet require(‘@tailwindcss/forms’) to the plugins block.

Once you’ve added the plugin as a requirement, you can begin applying Tailwind classes to components that aren’t styled with the default Tailwind classes.

For example, we can update the color and size of checkbox icons and also style the actual select options. Check out the video below to learn more about using the Tailwind Forms plugin.

Creating a Newsletter Signup Form

As we mentioned earlier, Tailwind doesn’t provide an out-of-the-box forms solution like BootStrap and Material UI. Instead, we can style the regular form components using classes supported by Tailwind.

You can apply styles like margin, padding, rounded corners, background colors, etc to just about any input element on your project.

Let’s create a responsive newsletter signup form using Tailwind CSS. For this, copy and paste the snippet below to the return block in your App.js file.

// App.js

<div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 p-4 mx-auto">
  <form class="bg-white rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-semibold mb-4">Subscribe to Our Newsletter</h2>

    <div class="mb-4">
      <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email Address</label>
      <input type="email" id="email" class="w-full border rounded-md p-2" placeholder="youremail@example.com" />
    </div>

    <div class="mb-6">
      <label class="flex items-center">
        <input type="checkbox" class="text-blue-500" id="subscribe" />
        <span class="ml-2 text-sm">I agree to receive marketing emails</span>
      </label>
    </div>

    <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md w-full">Subscribe</button>
  </form>
</div>

// ...

In the code snippet above, the form is contained within a responsive container (w-full md:w-1/2 lg:w-1/3 xl:w-1/4) to adapt to different screen sizes.

We use a white background with a rounded border and a shadow to give it a clean and modern look. The form title is styled with larger text and a font-semibold class.

For the email input field, we’ve used a rounded border and padding. The “I agree to receive marketing emails” checkbox is styled with a blue check and text added with the label tag. Lastly, the subscribe button has a blue background, which changes color on hover, and also spans the full width of the form.

When you save and preview the form, you should see a modern newsletter form that’s responsive on your website.

Responsive newsletter signup form

Creating a Responsive Registration and Login Form in Tailwind CSS

In this section, we’ll be creating a login and registration form using Tailwind CSS classes. To start, create a components folder in your React application and create 2 files: Login.jsx and Register.jsx.

Registration form component in React

These files will hold the code for the login and registration form respectively.

Tailwind Registration Form

In the Register.jsx file, add the following code to the file.

<div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 p-4 mx-auto">
  <form class="bg-white rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-semibold mb-4">Register</h2>

    <div class="mb-4">
      <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name</label>
      <input type="text" id="name" class="w-full border rounded-md p-2" placeholder="Your Name" />
    </div>

    <div class="mb-4">
      <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email Address</label>
      <input type="email" id="email" class="w-full border rounded-md p-2" placeholder="youremail@example.com" />
    </div>

    <div class="mb-4">
      <label for="password" class="block text-gray-700 text-sm font-bold mb-2">Password</label>
      <input type="password" id="password" class="w-full border rounded-md p-2" placeholder="Password" />
    </div>

    <div class="mb-4">
      <label for="confirmPassword" class="block text-gray-700 text-sm font-bold mb-2">Confirm Password</label>
      <input type="password" id="confirmPassword" class="w-full border rounded-md p-2" placeholder="Confirm Password" />
    </div>

    <div class="mb-6">
      <label for="bio" class="block text-gray-700 text-sm font-bold mb-2">Bio</label>
      <textarea id="bio" class="w-full border rounded-md p-2" rows="4" placeholder="Tell us about yourself"></textarea>
    </div>

    <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md w-full">Register</button>
    <p class="mt-4 text-sm text-gray-400 text-center">
    Already have an account? <a href="#" class="text-blue-500">Login</a>
  </p>
  </form>

Here is an explanation of the classes we used for this code:

  • The registration form contains fields for Name, Email, Password, Confirm Password, and a Bio textarea.

  • The form fields are styled with rounded borders and padding for a clean look.

  • The Bio textarea is sized to display four rows, making it suitable for longer text entries.

  • The submit button, with the label “Register” is styled with a blue background and a darker blue background hover effect. The submit button spans the full width of the form.

Here’s how the page will look in the frontend.

Tailwind Registration Form

Tailwind Login Form

For this, open the Login.jsx component and add the following code snippet.

  <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 p-4 mx-auto">
  <form class="bg-white rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-semibold mb-4">Login</h2>

    <div class="mb-4">
      <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email Address</label>
      <input type="email" id="email" class="w-full border rounded-md p-2" placeholder="youremail@example.com" />
    </div>

    <div class="mb-4">
      <label for="password" class="block text-gray-700 text-sm font-bold mb-2">Password</label>
      <input type="password" id="password" class="w-full border rounded-md p-2" placeholder="Password" />
    </div>

    <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md w-full">Login</button>
    <p class="mt-4 text-sm text-gray-400 text-center">
    Don't have an account? <a href="#" class="text-blue-500">Register</a>
  </p>
  </form>
</div>

The login form uses the same responsive design as the registration form. For this one, we only require 2 input fields for the user’s email and password. The submit button styles are the same as that of the register form. We are only changing the label to “Login”.

If your registration form contains a username field, you can use the username field instead of the email field for the login form.

Here’s how the page looks like in the frontend.

Responsive Tailwind CSS login form

How to Create Dark Mode Forms in Tailwind CSS

Tailwind provides utility classes to easily enable dark mode on your website. To create a dark theme, simply add the dark variant to the utility classes on your project.

Here is the dark mode variant of our login form.

<div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 p-4 mx-auto">
  <form class="bg-gray-800 text-white rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-semibold mb-4">Login</h2>

    <div class="mb-4">
      <label for="email" class="block text-gray-400 text-sm font-bold mb-2">Email Address</label>
      <input type="email" id="email" class="w-full border border-gray-600 rounded-md p-2 bg-gray-700" placeholder="youremail@example.com" />
    </div>

    <div class="mb-4">
      <label for="password" class="block text-gray-400 text-sm font-bold mb-2">Password</label>
      <input type="password" id="password" class="w-full border border-gray-600 rounded-md p-2 bg-gray-700" placeholder="Password" />
    </div>

    <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md w-full">Login</button>
  </form>

  <p class="mt-4 text-center text-sm text-gray-400">
    Don't have an account? <a href="#" class="text-blue-500">Register</a>
  </p>
</div>
Dark mode variant

If you’d like to learn more about implementing dark mode in Tailwind CSS and React, see our Tailwind dark mode tutorial.

3rd-Party Tailwind CSS Form Components

For more advanced form components and layouts, you can explore third-party libraries that provide free and customizable Tailwind CSS components. Below are some of the most popular third-party libraries:

PureCode provides many AI-generated templates including form templates to improve your workflow. The templates can be integrated into web applications built using Material UI, Tailwind or Bootstrap. If you’re looking for a ready-made form template for your project, then check out our list of over 10k templates.

[Access Tailwind Form Templates]

Frequently Asked Questions

Below, we’ve answered some of the top questions about creating a form with Tailwind CSS.

How do I create a form in Tailwind CSS?

To create a form in Tailwind CSS, you just need to use regular HTML form fields. Then apply Tailwind utility classes to each form element. If you’d like more styling options, then consider using the Tailwind CSS Forms plugin.

How do I install forms in Tailwind?

You can apply Tailwind CSS classes to your HTML form components once Tailwind is installed on your project. However, installing the official Tailwind CSS forms plugin provides additional styling to form elements.

How to create a responsive form in Tailwind CSS?

Creating a responsive form in Tailwind CSS involves using the responsive classes Tailwind provides to ensure your form elements adapt to different screen sizes. Refer to the responsive form examples in the guide for guidance.

What is the form plugin in Tailwind CSS?

Tailwind Forms is an official plugin for Tailwind CSS that provides pre-designed form elements and styles, making it easier to create and style forms in your web applications.

It essentially adds to the basic form classes preinstalled with Tailwind CSS.

How to add Tailwind CSS form plugin?

To add the Tailwind CSS form plugin to your project, you’ll first need to install it on the root directory of your project by running the command below.

npm install -D @tailwindcss/forms

Once you’ve installed it, you’ll then need to register it as a plugin in your config file by adding the require(‘tailwindcss/forms’) line to the plugins section.

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/forms'),
    // ...
  ],
}

Extending Your Tailwind Forms

Tailwind CSS simplifies the process of creating responsive and stylish forms for your web projects. Although the built-in classes provide basic customizations for form elements, you can use the Tailwind Forms plugin to extend this functionality.

In this guide, we’ve explained what forms are and how to create and customize forms using Tailwind CSS. Tailwind CSS also allows the use of custom CSS classes. This means you can define and use your own styles when creating forms.

If you’d like to easily create forms in Tailwind CSS, consider checking out Purecode templates. PureCode provides over 10k AI-generated templates, including form templates to make creating forms easy.

Get Start With PureCode Today

David Ozokoye

David Ozokoye

Software Engineer and Technical Writer