postImage

How to create React Forms using TailwindCSS.

blogImage

By Amarachi Iheanacho

Technical Writer

Forms have been used throught 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 builing a react form with tailwindcss.

Table of Content

  • Prerequisites
  • What is TailwindCSS
  • Creating our React Project
  • Installing TailwindCSS
  • Creating TailwindCSS 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.
  • Alternatively, we can use another package manager, Yarn.

What is Tailwind CSS

Tailwind CSS, according to the documentation on their website, tailwindcss is a utility-first CSS framework. TailwindCSS helps devlopers 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.

1cd Documents
2npx create-react-app project-name

Installing Tailwind CSS

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

1cd project-name

next run

1npm 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:

1npx 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.

1module.exports = {
2 content: [
3 "./src/**/*.{js,jsx,ts,tsx}",
4 ],
5 theme: {
6 extend: {},
7 },
8 plugins: [],
9}

Next add the Tailwind directives to your CSS

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

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

After this we run our project

1npm run start

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

React Bootstrap Forms

Creating TailwindCSS 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, tailwindcss 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

1npm install @heroicons/react

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

1import './App.css';
2
3
4import { LockClosedIcon } from '@heroicons/react/solid'
5
6export default function App() {
7 return (
8
9 <div className="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
10 <div className="max-w-md w-full space-y-8">
11 <div>
12 <img
13 className="mx-auto h-12 w-auto"
14 src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
15 alt="Workflow"
16 />
17 <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Sign in to your account</h2>
18 <p className="mt-2 text-center text-sm text-gray-600">
19 Or{' '}
20 <a href="#" className="font-medium text-indigo-600 hover:text-indigo-500">
21 start your 14-day free trial
22 </a>
23 </p>
24 </div>
25 <form className="mt-8 space-y-6" action="#" method="POST">
26 <input type="hidden" name="remember" defaultValue="true" />
27 <div className="rounded-md shadow-sm -space-y-px">
28 <div>
29 <label htmlFor="email-address" className="sr-only">
30 Email address
31 </label>
32 <input
33 id="email-address"
34 name="email"
35 type="email"
36 autoComplete="email"
37 required
38 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"
39 placeholder="Email address"
40 />
41 </div>
42 <div>
43 <label htmlFor="password" className="sr-only">
44 Password
45 </label>
46 <input
47 id="password"
48 name="password"
49 type="password"
50 autoComplete="current-password"
51 required
52 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"
53 placeholder="Password"
54 />
55 </div>
56 </div>
57
58 <div className="flex items-center justify-between">
59 <div className="flex items-center">
60 <input
61 id="remember-me"
62 name="remember-me"
63 type="checkbox"
64 className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
65 />
66 <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">
67 Remember me
68 </label>
69 </div>
70
71 <div className="text-sm">
72 <a href="#" className="font-medium text-indigo-600 hover:text-indigo-500">
73 Forgot your password?
74 </a>
75 </div>
76 </div>
77
78 <div>
79 <button
80 type="submit"
81 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"
82 >
83 <span className="absolute left-0 inset-y-0 flex items-center pl-3">
84 <LockClosedIcon className="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" aria-hidden="true" />
85 </span>
86 Sign in
87 </button>
88 </div>
89 </form>
90 </div>
91 </div>
92 </>
93 )
94}

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

Default Form Login

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

Conclusion

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

Resources

You may also find the following resources useful:

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...