Building a Sign Up Page using TailwindCSS

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

^^From tailwindcss.com

About

Tailwind CSS is somewhat based on BEM(read more ) methodology. Every class name in Tailwind CSS has mainly two parts: property name and value. For example: pt-4 has property as pt and value as 4, bg-gray-100 can be thought of as a combination of bg and gray-100. People who have already worked on any BEM framework like Bootstrap will find it easy to get going with Tailwind.

What are we building?

LIVE DEMO: play.tailwindcss.com/FhhKnGCnfw

We are going to design a basic Sign-Up page using tailwind to illustrate its power. Tailwind is a mobile-first framework, which means default styles are made for mobile and in order to make it work on bigger screens we need to attach the breakpoint prefixes like md, lg, xl, etc..

Tools to be used

We will just use the Tailwind Playground to design it.

Strategy

We will use flexbox with column-wise orientation to structure each of the fields of our form. Each of the fields will have its respective error message field. When a field is focused-in, we will have an outline kind of thing to show that it is currently being filled-in.

STEPS

1. Created a container div which will be base for all the elements of the page. We assigned it flex and flex-col to put every element just after the other one as we are targeting mobile-first. Along with that, we made make sure to align our items and justify our content center.

   <div 
       class="min-h-screen flex flex-col justify-center items-center"
   > 
   

2. (optional step) Added a section tag to hold the company's logo/name.

   <section 
       class="text-4xl font-extrabold text-blue-600 mb-8"
   >
   

3. We added our form tag to hold each of the input fields kept column-wise.

   <form
       class="w-4/5 flex flex-col p-10 space-y-3 bg-white shadow-2xl rounded-3xl"
   >
   

4. Wrapped each of the input fields in a parent div to act as group containing the label, input field and the div showing the error message.

   <div class="flex flex-col">
       <label class="text-lg font-semibold">Address</label>
       <input type="text" placeholder="123-Block-D, Mars" class="border-2 border-blue-500 px-4 py-1 rounded-md text-xl outline-none focus:ring-2 ring-blue-200"/>
       <div class="text-red-500">Name can not be empty</div>
   </div>
   

   We can see that the classes in the input field is huge and is also repetitive. In order to make that look elegant, we can use @apply directive.

   @tailwind base;
   @tailwind components;
   
   .input-field-style{
     @apply border-2 border-blue-500 px-4 py-1 rounded-md text-xl outline-none focus:ring-2 ring-blue-200;
   }
   @tailwind utilities;
   

   Once we apply the tailwind classes in our custom class, we can directly use that class for our fields.

   <input class="input-field-style" type="email" placeholder="johndoe@example.com" />
   

5. At last we added a button with color change on hover.

   <button class="bg-blue-600 text-white py-3 rounded-lg font-semibold tracking-wider uppercase transition-colors duration-200 hover:bg-blue-500">Create your account
   </button>
   

Closing notes

This is just a demonstration of Tailwind CSS. Please don't consider it as blog, rather as a showcase/use-case.

Thanks for reading. I will try to post tutorial on Tailwind CSS by next week.