Tailwind CSS over Plain CSS

I’ve been using Tailwind CSS for the last 7 months now and it is far better than plain CSS. Though some devs complain that it makes the code dirty but there are countless reasons to overlook that. Tailwind CSS basically makes you free of the design systems and create something of your own. Tailwind does have a design system but it is nothing as compared to let’s say Bootstrap. I have listed down some points that in my opinion make Tailwind CSS better than plain CSS.

Inline Styling

Tailwind CSS allows you to define all the styling on the element. This means that if you want to change the styling of a particular element you won’t have to open a separate file to make changes. That way you will avoid unnecessary lookups and save time as well. Doing this will make your code messy and unpleasing but it saves a lot of time and makes the development experience better.

<div role="listitem" class="flex justify-center w-full lg:border-r border-gray-300 py-6">


As you can see the styling of the element is incorporated within that element. Doing that saves unnecessary searching and also you will avoid making a new styling file.

Purging Unnecessary Styles

Tailwind generates a lot of classes and you will certainly not use all of them. The problem with it is that all the classes remain in your app unattended and increase the size of your app. To cope with this problem, Tailwind allows you to purge all the styles that your app doesn’t use. To purge, we need to add a purge property in the Tailwind config and provide the files it needs to look into. For example, the config below will look into all the HTML and JSX to search for used classes:

...
purge: [
'./src/**/*.html',
'./src/**/*.jsx',
]
...

Highly Customizable

One of the greatest luxuries of Tailwind CSS is all the customization it allows you to do. Although it comes with a default configuration, it is simple to override it with a tailwind.config.js file. It allows you to customize colors, spacing, size units, themes, etc…
The fact that it is highly customizable makes Tailwind better than plain CSS and easy to use. It is extremely efficient for teams.

No Media queries

Tailwind CSS allows you to make the UI responsive without using media queries. You can make the UI responsive in the class attribute itself. Utility classes can be used across a variety of breakpoints conditionally which helps in building complex responsive layouts hassle-free.
Tailwind by default provides 5 different breakpoints:

• sm:640px
• md:768px
• lg:1024px
• Xl:1280px
• 2xl:1536px

Get rid of naming things

The headache with using CSS is naming the classes. Which classes should be specific? Which classes should be more generic? How do you organize them all and make sure they cascade in the correct order. Tailwind CSS on the other hand provides utility classes and these utility classes are enough to build your design. Naming things only comes into play when you extract a component.

Cache benefits

Using a conventional CSS framework or custom CSS, if you want to make changes to your design you’ll most probably have to make changes to your CSS file. However, when using Tailwind, because you are using exactly the same classes over and over in your markup instead of changing your CSS file, you may not even have to bust your CSS cache to make small changes to your design. This means your users won’t have to redownload your CSS file too often.

Easy to make Components

Despite the fact that Tailwind is a utility CSS framework, making custom components from the combination of those utilities is very simple. The bigger benefit is that there are many UI kits for Tailwind CSS like Tail-Kit, Mamba UI, TUK, Tailblocks, etc…taking away all the pain of building a component from scratch. Recently I stumbled upon something better, a VS Code extension called blox with premade components in it. These kinds of tools are at our disposal courtesy of Tailwind’s ease for developers.

Conclusion

If you are not using Tailwind then surely you are missing out on a lot of good stuff. Tailwind is best for business in my opinion because it’s all about ease and saving time providing extra efficiency.