DEV Community

loading...

Create a Registration Form with TailwindCSS

brifiction profile image Brian Ng Updated on ・2 min read

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:

Alt Text

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.

Alt Text

Example registration form with TailwindCSS

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!

Discussion (0)

pic
Editor guide