Introduction
I recently noticed that having an idea of something you want to build sometimes, isn't as complicated as finding the right tools to build with. We are constantly conflicted about which framework or library to use, and the thought process can get you winding down rabbit holes for quite a while.
In this article, we are going to explore two of the most widely used CSS frameworks, TailwindCSS and Bootstrap. These two have been around for quite a while, the former younger than the latter, but they are responsible for many websites that are up and running today.
But why should one go for Tailwind or Bootstrap? What do they have or do not have in common? And what should you consider when making a choice?
Before we find answers to these questions, let's explore both frameworks separately.
What is Tailwind?
Tailwind was created by Adam Wathan and was first released in November 2017. It has been growing very fast since then and is taking over many other CSS frameworks that existed before it.
It is an open-source, utility-first CSS framework. Imagine that you have all the CSS classes written in a global CSS file, and all you have to do is call those classes in your HTML. So, you write CSS without writing CSS (if that makes sense).
Tailwind kind of follows something called atomic CSS or functional CSS.
Atomics CSS is the approach to CSS architecture that favors small, single-purposed classes with names based on visual function.
If you understand the basics of CSS, then picking up tailwind will not be much of a problem because the class names resemble and work in the same way as pure CSS.
Pros
As for advantages, Tailwind has got some.
Makes styling flexible and neat UIs much easier and faster.
It's easy to customize. Tailwind already has a large set of utility classes written for you, but customizing and making things suit you is also very easy, but sometimes uncommon.
Allows for optimization. You can't use every utility class on your site, and Tailwind uses PurgeCSS to help eliminate unused classes, thereby reducing file size.
Is a bonus for teams. If you are working with a team, then using Tailwind for production is a plus. Classes have naming conventions, and everyone can see and/or easily change the styles for an element without even looking at the global CSS file.
The Just In Time compiler (JIT). When your app starts to get complex, the size of the CSS file also becomes somewhat heavier. Tailwind introduced a JIT, that only compiles the CSS that you use.
Cons
As for disadvantages, there aren't too many, because Tailwind has been growing fast and improving so much over the years.
Before, developers complained that applying so many classes inside the HTML file made things ugly and clogged up. Tailwind fixed that by introducing reusable styles.
The one downside of Tailwind as compared to Bootstrap is that it does not give you prebuilt components like the latter does. With Bootstrap, you have a custom-made navbar already made behind the scenes for you. With Tailwind, you have to combine classes to make a navbar for yourself.
If you have little or no knowledge of CSS, then Tailwind might prove to be somehow strange. With previous CSS knowledge, you will quickly pick up the classes, and development there afterward will be faster.
What is Bootstrap?
Bootstrap has been around for well over 10 years. It was created at Twitter by Mark Otto and Jacob Thornton. Despite how old it is, it is still widely used today.
Just like Tailwind, it is open source. The reason why Bootstrap became so popular is because of the approach that it uses. The framework already has prebuilt components written in CSS and JavaScript ready-made for you. Components like navbars, buttons, forms, etc. Without much work from your side, you could have a complete website in only a matter of time.
Pros
Thriving community. They've been around forever (if 10+ years is that long). Despite the fact it's open source, Boostrap is backed by a huge community of teachers, as well as developers.
Prebuilt components. This is probably the biggest advantage of using the framework. Bootstrap's prebuilt components save a lot of time and are easy to get started with.
Has a good grid system. This makes layouts with Bootstrap easy to build and manipulate. This advantage also contributes to the fact that the framework is perfect for the mobile-first approach, and makes it easy to achieve responsiveness.
Has a wide variety of templates. With tools like Bootstrap Studio, you don't even need to get your hands dirty with too much code. All you need to do is to fine-tune these templates to your taste.
Cons
Constant overriding of styles. Since Bootstrap has already written pretty much everything for you, it leaves developers wanting to make things look the way they want most of the time. To do this, you need to dig into the many files that Boostrap comes with and start customizing styles and media queries.
Boostrap classes are pretty generic. If everyone kept using the standard classes without any customizations, then every website would start to look and feel the same.
What's the difference?
As you might have seen above, these two frameworks come from two different approaches. They have quite a number of differences.
Bootstrap comes with larger file size. If you aren't using the CDN, then the next way to add Bootstrap to your project is by downloading a ZIP file that will contain the necessary CSS and JavaScript files. Tailwind on the other hand is installed as a package and the largest file you'll come across is the global CSS file which contains all the utility classes.
Like we've seen before, Bootstrap comes with prebuilt components that aim at helping you build faster. Tailwind comes with utility classes that help you build freely.
Bootstrap requires constant overriding of styles, which can get pretty much tiring in the long run. Since Tailwind doesn't restrict you to have elements look a certain way, not many customizations need to be made if any should even be made.
A button created with Bootstrap by developer A will look exactly the same as a button created with Bootstrap by developer B. Again, tweaks need to be made in order to create significant differences. With Tailwind, UIs come out looking slick and neat. Needless to say, I'm biased towards Tailwind.
When to use what?
If you are someone who doesn't like getting into too much styling or coming from the backend world, or if you just need a minimalistic front-end so that you can focus on backend logic, then Bootstrap might be the perfect fit for you.
If you are more design-inclined and love to have things looking neat and beautiful, then Tailwind makes it easier for you. Or maybe you're me, who isn't design-inclined but loves working with a framework that makes my designing skills better than they actually are.
Conclusion
The end note is, to work with what you are comfortable with. These are two amazing frameworks with technical functionalities that are far beyond the scope of this article. If Bootstrap calls to you, go for it. Same as for Tailwind. I hope that this article shone sufficient light on these, and helps make a pick for your next project.
Happy Coding!
Let's Connect
Top comments (0)