Tailwind CSS

One of the newer technologies after Bulma CSS which is getting a lot of attention these days is Tailwind CSS. When I first heard about it, I became so interested and excited that I was given this opportunity to work on the frontend using Tailwind CSS.

And now our company has shifted from using Bulma towards tailwind CSS. Being a fresher it is not easy for me to work on some other CSS framework when I just learned some other. But I didn't feel like I am experiencing something new when I started using Tailwind. Our developers are also very excited working with this new framework.

Tailwind is a CSS utility framework that is created for utility purposes. It does not involve any built-in UI components and make development easier. For Example :

<div class="bg-gray-100 rounded-xl p-8">Hello World </div>

The above example is what Tailwind represents.

Here the difference you can consider is that instead of writing basic CSS styling, you apply these pre-existing classes directly in your HTML.

Some of the benefits -

It makes the styling process much faster.
There are three ways you can use Tailwind with Gatsby.
It reaps very good results by being able to write custom CSS that matches exactly what is needed.
It bothers on code size and extra unnecessary classes and removes any unused styles so that codebase will not be bloated with extra classes.
Custom styling can be provided to the components with the help of this framework.
Tailwind CSS is a highly customizable framework.
The availability of utility classes makes it easier to build complex responsive layouts freely.
Creating Components from combinations of those utilities is really simple.
Since you don’t need to name things, you don’t have to switch context as much, and you’re not fighting the framework to make customizations, prototyping and implementing custom designs is really fast using Tailwind.
All of Tailwind’s utilities are generated with responsive versions that you can use to make your site look different on the mobile, tablet, and desktop screen sizes.
Using Tailwind, changes you make will be made in your templates which only affects the page you’re working on. This makes it much easier to change a single page without worrying about any side effects.

If this blog really helps you and you’re interested in, definitely give Tailwind a try. I must say then you should read their documentation and use it in your coding.

Hope you like this blog and you must refer to our all blogs once if you have not read.

Thank you for Reading!