How to create React Forms using Tailwind CSS.
Tags: tailwindcss, codenewbie, webdev
Published: 2022-01-17 09:09:14

---
title: How to create React Forms using Tailwind CSS.
published: True
date: 2021-01-10 01:16:04 UTC
tags: ["tailwindcss", "codenewbie", "webdev"]
canonical_url: https://www.devwares.com/blog//how-to-create-react-forms-using-tailwind-css
---

Forms have been used through out modern history, whether it be physical forms or virtual forms. They have been used to collate information for various reasons whether it be government forms, health, or pension forms they all have that same underlying rule.

React forms are no different there are usually found on a web application and they allow you to keep in touch with your users, use the data collected from the forms to better please your users and increase you returns in revenue.

In this article we are going to walk through building a react form with tailwind CSS.

## Table of Content

- Prerequisites
- What is Tailwind CSS
- Creating our React Project
- Installing Tailwind CSS
- Creating Tailwind CSS form in our App.js
- Conclusion
- Resources

## Prerequisities

To make the most of this article, it is important that you have the following:

- A basic understanding of HTML.
- A basic understanding of CSS.
- A basic understanding of React.
- Node and it’s package manager, npm, Run the command node -v && npm -v to verify we have them installed, or install them from [here](https://nodejs.org/en/).
- Alternatively, we can use another package manager, [Yarn](https://yarnpkg.com/).

## What is Tailwind CSS

[Tailwind CSS](https://tailwindcss.com/), according to the documentation on their website, tailwind CSS is a utility-first CSS framework. Tailwind CSS helps developers brings designs to life, it is fast and easy-to-use, with its custom class names that gifts our application with ready-to-use styles.

## Creating our React project

To create a new react project, we go to our terminal, cd in the directory we want and then run this command `npx create-react-app project-name`.

```
cd Documents
npx create-react-app project-name

```

## Installing Tailwind CSS

To have tailwindcss available in your project, cd into the project your created earlier

```
cd project-name

```

next run

```
npm install -D tailwindcss postcss autoprefixer

```

This helps to install the tailwindcss and its peer dependencies, we then generate our `tailwind.config.js` and `postcss.config.js` files by running this command:

```
npx tailwindcss init -p

```

**Configuring your templates path**

To configure your paths go to your `tailwind.config.js`, and edit your `module.exports` object, add the paths to your template files in your `content` array.

```

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

```

**Next add the Tailwind directives to your CSS**

Add the tailwind directives in your `./src/index.css` file.

```
@tailwind base;
@tailwind components;
@tailwind utilities;

```

After this we run our project

```
npm run start

```

You should this in your browser when you go to `http://localhost:3000/`.

![React Bootstrap Forms](https://www.devwares.com/blog/images/REACT.png)

## Creating Tailwind CSS Form in our App.js

**Simple no labels**

This "Simple no labels" form can also be referred to as the default form, similar to forms build with traditional CSS, tailwind CSS forms consists of input elements and labels to differentiate the input elements and what information goes in the input elements.

In the form below, we are going to use a lock icon in our buttons, so to be able to use this in our code we have to install heroicon in our project. To do that we have to run this command

```

npm install @heroicons/react

```

Next we imprt the icon we want `LockClosedIcon` from `@heroicons/react/solid`.

```react

import './App.css';
  
  
import { LockClosedIcon } from '@heroicons/react/solid'

export default function App() {
  return (
   
      <div className="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-md w-full space-y-8">
          <div>
            <img
              className="mx-auto h-12 w-auto"
              src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
              alt="Workflow"
            />
            <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Sign in to your account</h2>
            <p className="mt-2 text-center text-sm text-gray-600">
              Or{' '}
              <a href="#" className="font-medium text-indigo-600 hover:text-indigo-500">
                start your 14-day free trial
              </a>
            </p>
          </div>
          <form className="mt-8 space-y-6" action="#" method="POST">
            <input type="hidden" name="remember" defaultValue="true" />
            <div className="rounded-md shadow-sm -space-y-px">
              <div>
                <label htmlFor="email-address" className="sr-only">
                  Email address
                </label>
                <input
                  id="email-address"
                  name="email"
                  type="email"
                  autoComplete="email"
                  required
                  className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                  placeholder="Email address"
                />
              </div>
              <div>
                <label htmlFor="password" className="sr-only">
                  Password
                </label>
                <input
                  id="password"
                  name="password"
                  type="password"
                  autoComplete="current-password"
                  required
                  className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                  placeholder="Password"
                />
              </div>
            </div>

            <div className="flex items-center justify-between">
              <div className="flex items-center">
                <input
                  id="remember-me"
                  name="remember-me"
                  type="checkbox"
                  className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                />
                <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">
                  Remember me
                </label>
              </div>

              <div className="text-sm">
                <a href="#" className="font-medium text-indigo-600 hover:text-indigo-500">
                  Forgot your password?
                </a>
              </div>
            </div>

            <div>
              <button
                type="submit"
                className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                <span className="absolute left-0 inset-y-0 flex items-center pl-3">
                  <LockClosedIcon className="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" aria-hidden="true" />
                </span>
                Sign in
              </button>
            </div>
          </form>
        </div>
      </div>
    </>
  )
}

```

With this we have created a form that looks a lot like the image below

![Default Form Login](https://www.devwares.com/blog/images/react-tailwindcss-forms.PNG)

Sometimes as a developer you might not want to want to write elaborate classes as they might be hard to keep up with, another UI library we could use is Contrast. Check out their documentation [here](https://www.devwares.com/docs/contrast/react/index)

## Conclusion

In this article we discussed what Tailwind CSS is, and how to install it in your project. Finally we created a form using the template provided by tailwind CSS in their documentation.

## Design and code tailwind css websites 3x faster

We created a tool to visually build tailwind css components, prototypes, websites, and webapps. Ship projects faster using an intuitive tailwind builder and editor.[Try Windframe out for free.](https://www.devwares.com/windframe)

![WINDFRAME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8w3qu4a93bdkhtjnhbh.png)


## Resources

You may also find the following resources useful:

- [Link to the Github Code](https://github.com/Iheanacho-
ai/devwares-form)

- [Tailwind Docs](https://tailwindcss.com/docs/installation)

- [Get Contrast PRO](https://www.devwares.com/product/bootstrap-contrast-pro)

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [How to use Bootstrap in React Using a React Library](https://www.devwares.com/blog/using-bootstrap-in-react/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table](https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)

- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)