If you are like me, you should be creating websites with the world's popular CSS framework called Bootstrap. But I recently switched to TailwindCSS for a few projects. If you have also seen the hype and wanted to jump in to TailwindCSS yet not completely ready? I'll help you to decide whether you should keep using Bootstrap or switch to TailwindCSS.
A Framework is a framework
First of all, There is no right or wrong way here. Since you are already using Bootstrap, you know the importance and how much time it can save as a developer. Before Bootstrap, we struggled for browser compatibility and make it responsive across devices. But Bootstrap made it easy and we never worried about these since they handled it for us so that we can focus on our design.
What is TailwindCSS
TailwindCSS is also a framework and I would say its also similar to Bootstrap in some ways. Bootstrap is built with two core features: The pre-built Components and Utility Classes. In the other hand, Using TailwindCSS, you will be missing the pre-built components because TailwindCSS is only about Utility Classes
About the Hype
If you watch the developer community closely, you must have encountered developers praising TailwindCSS and using it for their project. Developers with little or no CSS knowledge is loving TailwindCSS because by just remembering few utility classes, they can do many awesome things without even touching CSS file (which is their worst nightmare).
This is the one main reason people love TailwindCSS which you can't do with Bootstrap. Because Bootstrap provides few components but when you want to modify it or create new one, you will have to write custom CSS or SASS. In case of Tailwind, since there is a utility class for everything, its easy in some way.
The Haters
You also might have noticed while some people literally loved TailwindCSS, Many others really hate this framework and they got many reasons for them. My finding is that they are the people knows how to write actual CSS.
Yes. If you are someone who knows how to write proper CSS, you might feel weird to write the same thing as class names. You'll think why don't we write normal CSS instead.
Enter Purge CSS
When using bootstrap, the easier way was to include their CSS using a CDN and do all of our modifications in a custom CSS file. This resulted in a large CSS files and the later version of Bootstrap Promoted SASS to include only the components we actually use. This really helped to reduce the file size.
Similarly, TailwindCSS is also provide a way to remove unused CSS from our project. Since its powered by PostCSS, It scans through all of our files and removes un-used class names from the output. If you compared it with Bootstrap it will be way smaller because in Bootstrap we control the file size by omitting components. Even if you use only one class from one component, you should include the whole component. Thus it increases the file size.
Note: There might be similar tools to purge CSS like TailwindCSS in Bootstrap as well.
Lengthy Class Names
Another main issue people raise with TailwindCSS is their long class names which makes it hard for repetitive elements. While this is true, they provide a nice option to write a single class name if you wish using their @apply directive.
Example
.btn-primary {
@apply bg-blue-500 text-lg py-5 px-3 text-white;
}
Like this, you will be able to use just one class but still use TailwindCSS Utilities.
The Benefits
Now you might be thinking, then what's the difference between writing @apply and normal CSS. The main benefit I see with this method is code organization & maintainability. No matter how many people wrote the CSS, or in how many pages you wrote the CSS, You can assure that there is a standard not just random magic numbers like padding: 17px;
It will be easier to create and maintain a Design System using the tailwind.config.js and you can make sure no extra un-documented classes or property is written to the project.
Coming to the Point
Bootstrap or TailwindCSS? That's the main question and here is a simple way to figure out! Remember, there is no right or wrong way, it will be based on your project and its requirement.
Q) Are you happy with Bootstrap?
A) If yes, keep using it, but try TailwindCSS is any other projects to get familiar with.
Q) Do you feel its hard to maintain Bootstrap CSS overtime?
A) If yes, Use TailwindCSS
Q) Do you have deep understanding in writing pure CSS?
A) Use No framework at all, Just make one for your need. Although its better to try both to get familiar with.
Q) Do you think writing a bunch of CSS class names is funny?
A) You can still use TailwindCSS with @apply directive.
Q) Is multiple people writing CSS in your Project?
A) Go with TailwindCSS as it will reduce your headache while maintaining large project.
Q) Do you think you are too bad at CSS and struggling to make layouts or UI even with Utility classes?
A) Go with Bootstrap as they provide many useful components you can copy paste.
That's it
Hope you have an idea of both frameworks now and how it works, Now its your choice to choose your framework or no framework at all. Remember its all based on our needs and our expertise. I repeat there is no right or bad way.
Let me know what's your favorite and why!
Did I miss something, also let me know in the comments.
Follow me on Twitter
