Creating A Login Form With Tailwind CSS & NextJs

Creating A Login Form With Tailwind

This is the second part in a multipart blog series where I learn Tailwind CSS with NextJs. If you've not read the first post about setting up a project then I'd recommend giving it a quick read so you can follow along. If you've already got a React application with Tailwind installed then feel free to jump right in. Authentication is a large part of most web applications, which means if you've ever built a web application that features authentication then you've built a login page before. I'm going to walk you through how to style a neutral looking login form that you can use in your applications.

What We'll Be Building

Login Form Default State

Error Messages

Reactive Login Button & Error Message

Input Container

First we need to create the container that houses the form. We can make this reusable by turning it into its own component that receives its own child elements. This also makes passing props down to the inputs easier as well as this container could be used in multiple places.

Form Text Inputs

If you're unfamiliar with TSX syntax then you can brush up on how the TypeScript interface syntax works here. The following interface is used for the TextInput component we are about to cover.

Each input is made of a label, an input and a paragraph that houses either a hint or an error message that informs the user they've provided invalid input.

Label

Input Box

Paragraph (Message and Error Message)

Here I'm using !!errorMessage to cast errorMessage to a boolean value so I can determine whether its truthy or falsy.

Completed Input

Submit Button

All Together

If you'd like to know more or have any questions or help just leave a comment and I'll try and get back to you. If you found this useful then share it with your friends and tell them how awesome Tailwind is and how easy it is to put together a clean design. Hopefully you've learned something from this!

If you found this helpful or any suggestions for future components to cover then let me know in the comments section.