Create a Registration Form with TailwindCSS

What is TailwindCSS?

TailwindCSS is a low-level CSS framework, which comes bundled with a lot of CSS utility classes, hence emphasis on "code less, do more".

Link: https://tailwindcss.com/docs/installation

Getting started

To get started with using TailwindCSS, there are so far three responsive design rules followed. These guideline rules saves time and effort, when creating a fully-responsive design for your app.

Guidelines & rules

1. Responsiveness - The design thought-flow, should start from mobile screens towards desktop or larger screens. This way, you'll have a better understanding of how Tailwind is meant to be used during the early design stages.
2. Component-based templates - It doesn't matter if you're designing a series of button types, to an administrator dashboard, create your "component-based template" for each component. A very good exercise is for example building a photo gallery or portfolio site. There will be design ideas on how you may have cards, grids, and form sections.
3. Keep things organized, if possible - With TailwindCSS, you're able to create 'base styles'. This feature is especially fun to use, a SMACSS advocate's wonderland for experimentation a plenty (https://tailwindcss.com/docs/adding-base-styles).

Most of these guidelines and rules, are also well-written and explained in these TailwindCSS documentation sections below:

Let's take a look at an example

I have a registration form example, and it is made specially for a Laravel project. A bonus to this example, is we have some nice label effect happening for each of the text input fields.

Codepen

Summary

TailwindCSS is wonderful and amazing. A definite game-changer for creating swift & responsive designs. However, do note that TailwindCSS is still not meant to be a "one for all" solution.

Design frameworks like Bootstrap, Bulma and Foundation are still fantastic to work with for most occassions.

Have fun, and continue to experiment with TailwindCSS!