Forms are an essential part of web applications, allowing users to input and submit data. In this chapter, we will explore how to handle form values in a React application styled with Tailwind CSS. We will cover setting up a form, managing form state with React, and applying Tailwind CSS classes for styling.

Setting Up Tailwind CSS in React Project using Vite

If you haven't already created a React project, you can do so using Create React App:

Step-1 Create React Project Using Vite

npm create vite@latest

Step-2 Install depencies like this

cd go_to_project_folder

npm install

Step-3 Setup and install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Step-4 Open tailwind.config.js file and paste these code

/** @type {import('tailwindcss').Config} */

export default {

 content: [

  "./index.html",

  "./src/**/*.{js,ts,jsx,tsx}",

 ],

 theme: {

  extend: {},

 },

 plugins: [],

}

Step-5 Open index.css and paste it

@tailwind base;

@tailwind components;

@tailwind utilities;

Now, you can test tailwind add any class Value related to tailwind in your HTML tags like h1,p, div

Designing a Signup Form using Tailwind CSS also Handling Form Data

import { useState } from 'react';

import 'animate.css';

const App = ()=>{

  const model = {

    firstname: '',

    lastname: '',

    email: '',

    password: '',

    username: '',

    mobile: ''

  }

  const [form, setForm] = useState(model)

  const getFormValue = (e)=>{

    const input = e.target

    const value = input.value

    const key = input.name

    setForm({

      ...form,

      [key]: value

    })

  }

  const signup = (e)=>{

    e.preventDefault()

    console.log(form)

  }

  return (

    <div className="bg-gray-100 h-screen flex justify-center items-center">

      <div className="bg-white px-8 py-6 w-[450px] shadow-lg rounded-lg animate__animated animate__zoomIn">

        <h1 className='text-2xl font-bold mb-4 text-center'>CodingOtt Signup Form</h1>

        <form className='flex flex-col gap-4' onSubmit={signup}>

          <div className='flex flex-col gap-1'>

            <label className='text-lg font-semibold'>Firstname</label>

            <input

              name="firstname"

              type="text"

              placeholder="Enter first name here"

              className='border p-2 rounded border-gray-300'

              onChange={getFormValue}

            />

            {/* <small className='text-rose-600 font-semibold text-sm'>This field is required</small> */}

          </div>

          <div className='flex flex-col gap-1'>

            <label className='text-lg font-semibold'>Lastname</label>

            <input

              name="lastname"

              type="text"

              placeholder="Enter last name here"

              className='border p-2 rounded border-gray-300'

              onChange={getFormValue}

            />

            {/* <small className='text-rose-600 font-semibold text-sm'>This field is required</small> */}

          </div>

          <div className='flex flex-col gap-2'>

            <label className='text-lg font-semibold'>Email</label>

            <input

              name="email"

              type="email"

              placeholder="email@gmail.com"

              className='border p-2 rounded border-gray-300'

              onChange={getFormValue}

            />

            {/* <small className='text-rose-600 font-semibold text-sm'>This field is required</small> */}

          </div>

          <div className='flex flex-col gap-2'>

            <label className='text-lg font-semibold'>Password</label>

            <input

              name="password"

              type="password"

              placeholder="*************"

              className='border p-2 rounded border-gray-300'

              onChange={getFormValue}

            />

            {/* <small className='text-rose-600 font-semibold text-sm'>This field is required</small> */}

          </div>

          <div className='flex flex-col gap-2'>

            <label className='text-lg font-semibold'>Username</label>

            <input

              name="username"

              type="text"

              placeholder="@Username"

              className='border p-2 rounded border-gray-300'

              onChange={getFormValue}

            />

            {/* <small className='text-rose-600 font-semibold text-sm'>This field is required</small> */}

          </div>

          <div className='flex flex-col gap-2'>

            <label className='text-lg font-semibold'>Mobile no</label>

            <input

              name="mobile"

              type="number"

              placeholder="9472395194"

              className='border p-2 rounded border-gray-300'

              onChange={getFormValue}

            />

            {/* <small className='text-rose-600 font-semibold text-sm'>This field is required</small> */}

          </div>

          <button className='border-0 bg-indigo-600 text-white rounded py-2 font-semibold'>Submit</button>

        </form>

      </div>

    </div>

  )

}

export default App

List of useful Tailwind CSS class values

Width

1. w-1 : increase this 1 according to your need
2. w-fit : Arrange width according to content
3. w-full : full width 100%
4. w-[50px] : Add Square to set custom width value
5. w-6/12 : 50% width

Height

1. h-full - 100% height
2. h-screen - 100vh height
3. min-h-screen - minimum height 100vh

Padding

1. p-1 : set all side padding you can increase this 1 according to your need
2. px-1 : set left and right side padding
3. py-1 : set top and bottom side padding
4. pt-1 : set top side padding
5. pb-1 : set bottom side padding

Margin

1. m-1 : set all side margin you can increase this 1 according to your need
2. mx-1 : set left and right side margin
3. my-1 : set top and bottom side margin
4. mt-1 : set top side margin
5. mb-1 : set bottom side margin

Shadow

1. shadow
2. shadow-sm
3. shadow-md
4. shadow-lg
5. shadow-xl
6. shadow-2xl

Border Radius

1. rounded
2. rounded-md
3. rounded-lg
4. rounded-full - For making box circular

Border

1. border - to setup default border
2. border-1 - for border width
3. border-red-500 - change border color

Display

1. flex
2. block
3. hidden
4. justify-center justify-between justify-around justify-evenly
5. items-center

Position

1. absolute
2. relative
3. fixed
4. sticky
5. top-0
6. left-0
7. z-10 - for z-index