Tailwind CSS: My experience in 2022

It's 2022, and it's officially been 5 years since Tailwinds launch. Now some might ask what exactly is Tailwind CSS, well according to their website:

Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces.

I have always been a Bootstrap guy (mainly for its grid column system and many prebuilt components) but after I joined my current organization, I’ve been required to work with Tailwind and it has truly been an experience. In this little article I'll go over the highs and lows I have encountered while working with Tailwind CSS.

1. No prebuilt components
When I started using Tailwind, I was blown away when I wanted a quick navigation bar and I couldn't see any which was of much use. This was a major shock for me because I was used to using Bootstraps prebuilt components, where I could easily tweak them to suit my needs. With Tailwind, I had to build all my components from scratch, make it responsive and add all the required JavaScript code to further improve on them.

2. HTML code looked jumbled
My HTML files are constantly in disarray, like a lot's going on in them. Normally, a separate CSS file would be required to house the styling and make the HTML file contain strictly markup but with Tailwind you'd have to code the Tailwind tags inline with your HTML code.

/*Vanilla CSS*/
div {
   font-weight: 700;
   font-size: 16px;
   border-radius: 8px;
   color: white;
  }

/*Tailwind CSS*/
<div class="font-bold text-base rounded text-white"></div>

It really just feels like a lot's going on, and indeed it is.

3. Repetition of Tailwind styles
I constantly see myself repeating Tailwind styles over and over again. Multiple div tags with the same class attributes over multiple files eventually becomes awfully repetitive and tiresome.

Highs

1. Reduced CSS code
I noticed I was writing less CSS. Sometimes having the ability to change the background color of a div tag <div class="bg-gray-100"></div> or increasing the font size of a text by simply doing <p class="text-lg">Hello World</p> felt more intuitive than switching over to my external stylesheet to write it.

2.Improved my understanding of CSS
Whenever I stumble on some properties in Tailwind that I have little or no knowledge of, I quickly consult my editor to find and test out the CSS equivalent of that property, and how it fully works and operates thus improving my all round knowledge of the language.

3. Responsiveness has never been truly easier
With tags like xs, sm, lg etc... that could be applied to every aspect of my HTML file, manipulating CSS breakpoints has been a breeze. I almost never have to write media queries because Tailwind does a fine job of handling the aspect of responsiveness.

Summary

It's currently an interesting experience for me, using Tailwind. The question is, will I continue with Tailwind CSS after leaving my organization or when working on a personal project? Well for now, it's not certain, but what I do know is that it's a thrilling new experience and I'm here for every bit of it.🥳🥳