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.
Top comments (6)
"No Media queries" - you are using them with Tailwind;
"Purging Unnecessary Styles" - there is no unnecessary styles with plain CSS;
"Inline Styling" - same for plain CSS -
className="flex"vs.style={{display: 'flex'}};"Highly Customizable" - not as plain CSS;
"Cache benefits" - same for plain CSS;
Tail is CSS.
"Easy to make Components" - ok;
"Get rid of naming things" - ok;
I tried using it for about 3 or 4 months, however I then found Styled Components and found that I preferred using traditional css more, the abundance of class names did make for a messy environment I felt. The class names themselves are clear for the most part but you can quickly have a lot of classes in your list
I do get your point. If you get used to of Tailwind then its hard to let go
I really love using tailwind css and I think it doesn't make your code dirty as long as you find a way to organize the classes like for example to start with the box model then move on to the colors etc..
That is so true. Totally agree with you
I still don't quite get the benefit from Tailwind over plain CSS. Actually, it looks like a huge step backwards to me. Tailwind feels like inline styles where you replace a style property with a classname. With CSS at least, it could be generalized in classes and placed in stylesheets to make global changes easier. What's the point of tailwind?!