So sánh tailwind vs bootstrap

CSS frameworks have been a staple of web development over the last 10 years and with new ones coming onto the scene regularly, it’s only natural to question if a new one is better than existing options. So, in this post, we’re going to be comparing one of the longest-running CSS frameworks (Bootstrap) with one of the newer ones (Tailwind CSS) to see what the differences and similarities are and how to choose between them.

Table of contents

1. What is Bootstrap?
2. What is Tailwind CSS?
3. Why compare Tailwind CSS and Bootstrap?
4. The Similarities
5. Key considerations for choosing between Bootstrap and Tailwind CSS
6. Is one better than the other?
7. What about vanilla CSS in 2022?
8. Final Thoughts

What is Bootstrap?

Bootstrap is one of the longest-running CSS frameworks still in use; it was created and open-sourced in 2011 by Twitter. One of its biggest draws is that it provides CSS-based templates and classes for common components that put responsiveness and mobile-first design at the forefront. For example, if you want to make a dropdown in Bootstrap you can use dropdown-menu and dropdown-item classes respectively on the container and child elements, and Bootstrap will automatically apply all of the required CSS in the background to style these components as dropdown menus or items.

What is Tailwind CSS?

Tailwind CSS on the other hand was created in 2017 by Adam Wathan and Steve Schoger. It describes itself as a “utility-first CSS framework packed with classes to build any design.” Unlike Bootstrap, Tailwind CSS doesn’t offer any pre-built components for you to use, instead, it’s up to you to design and build your own. They just provide you with the tools to do it quickly and easily. For example, Tailwind CSS comes with a great IDE integration in VS Code that helps you autocomplete suggestions, lint your classes, and provide class definitions without you needing to leave your editor. Tailwind CSS also makes responsive designs easy as they handle all the media queries for you, you just need to use the breakpoint you want to target in front of the class you’re using.

Unlike Bootstrap, Tailwind CSS doesn’t come with prebuilt classes like dropdown-menu and dropdown-item. (It’s worth noting there is an additional, paid UI kit offered by Tailwind’s creators, but since it’s not part of the core offering, we’ll limit how much we consider that here.) Instead, the core framework operates at a much lower level using utility classes like px-4, text-center, and rounded-full. These are all abstractions of traditional CSS properties: padding-x, text-align, and border-radius. But instead of writing CSS yourself and worrying about things like class naming conventions, Tailwind CSS handles it all for you, and you just need to use the classes directly on the elements you wish to style.

Why compare Tailwind CSS and Bootstrap?

Bootstrap, as mentioned, has been around for a long time and in that time the web and web development have evolved; new technologies and ways of working have become commonplace that we wouldn’t have dreamt of in 2011. However, just because something has been around for a long period of time doesn’t instantly make it the best tool for the job. We need to keep comparing it to newer tools to establish what the best tool for our scenario is.

But why Tailwind CSS? Tailwind CSS has gained a large following in a relatively short period of time, and it has a lot of momentum behind it. It’s quickly becoming one of the most popular frameworks used in modern web development. This makes it the perfect candidate to compare against Bootstrap. So, is the new kid on the block the best or is the old tried-and-tested method still better?

Stay on Top of New Tools, Frameworks, and More

Research shows that we learn better by doing. Dive into a monthly tutorial with the Optimized Dev Newsletter that helps you decide which new web dev tools are worth adding to your stack.

Email Address

The Similarities

Let’s start with the similarities. Both of these frameworks abstract the actual CSS away from your workflow so you no longer need to worry about writing tons of CSS directly and can instead focus more on building out your user interface (UI). This is because you only need to use the various class names in your HTML markup and the frameworks will handle all the actual CSS for you behind the scenes. While some say this approach of using lots of classes in your HTML markup leads to a busy-looking markup, it’s hard to argue against the fact that these frameworks both simplify and speed up the process of building UIs.

Although they’ve been around for different periods of time, they’re both in production for high-profile and successful companies, proving they can be used in large deployments and at scale. According to StackShare, Bootstrap is in use at over 40k companies with names like Spotify, Udemy, and Twitter standing out. Tailwind CSS, on the other hand, is used by companies like Hashnode and Netflix (for their Top 10 page).

Key considerations for choosing between Bootstrap and Tailwind CSS

Answering a few questions about you or your project might help you make a choice between Tailwind CSS and Bootstrap.

How much design work is acceptable for you?

As alluded to earlier on, Tailwind requires more design work than Bootstrap. While Bootstrap offers pre-built CSS components out of the box for you to use, Tailwind does not. This means you need to design and build all your components from scratch. So, if designing isn’t your strongest skill set or if your project is on a tight deadline and there’s little time allowed for designing, then you may wish to go with Bootstrap and its pre-built components to save you some time.

Is development speed more important than a unique-looking website?

While Bootstrap’s pre-built CSS components will speed up your development and take the need for designing away from you, it does come with a trade-off. Your website is likely to look more generic. As mentioned in the previous section, Bootstrap is reported to be in use at over 40k companies. There are only so many times you can reshuffle and re-skin pre-built components before patterns emerge.

Now, if the design of the website isn’t the focal point of the project, and it doesn’t need to be a completely custom design, pre-built CSS components may be the way to go. But, if having a unique design is important to the project or your brand identity, then having the freedom to build completely custom designs might be the best choice, which is what Tailwind CSS offers you.

Is a UI kit for you?

This consideration closely relates to the first one. Bootstrap has pre-built components to speed up your development and give you repeatable and responsive design elements quickly and easily. Tailwind CSS does not have this, but it is worth noting again that the creators of Tailwind CSS do offer a UI kit called TailwindUI (but, as we mentioned, this is a paid optional extra and, unlike Bootstrap, is not included in the core offering).

UI kits can be great; they offer you speed and reusability. But, they can also limit what you can achieve with your design. This is because UI kits only have so many components within them and because your design needs to utilize these components, you’re limited by the number of ways they can be rearranged. This is a trade-off you need to consider when choosing between Tailwind CSS and Bootstrap.

It is also worth mentioning though that just because Tailwind CSS doesn’t include a UI kit from the get-go, you could always create one for your project using it; then you would get the benefit of a UI kit and the flexibility of Tailwind CSS at the same time.

Is one better than the other?

Okay, so let’s tackle the real question, the one you came to this post for. Is one of these CSS frameworks better than the other? In my honest opinion, both are valid choices for projects, so if one is better than the other is a personal choice more than an objective “this framework is best all the time.” So, as with many things in web development and especially in design, it depends on how you answer the considerations above.

If you like the freedom to make completely custom components and designs from the ground up without having to worry about actually writing CSS and managing the files and selectors that go with it, then Tailwind CSS is a no-brainer in my opinion. But, if designing really isn’t your strong suit and you’d rather not think about it all then something like Bootstrap that offers pre-built UI components and more of a “bring your content” approach might be for you. Bootstrap tends to appeal to a lot of backend developers for this reason.

Keep learning:

• 

  How to Choose the Best CSS Framework: Understanding Metrics and Context

  How to Choose the Best CSS Framework: Understanding Metrics and Context

• Next.js SEO Tutorial: Try a Quick Project with Key Optimizations

  Next.js SEO Tutorial: Try a Quick Project with Key Optimizations

What about vanilla CSS in 2022?

There is of course another option we should mention, and that is not using a CSS framework at all. Just because CSS frameworks are growing in popularity doesn’t mean they should be the only thing we use. CSS on its own is still a valid choice in 2022; it’s still able to produce excellent-looking websites and UIs.

In reality, all Tailwind, Bootstrap, and other CSS frameworks do is abstract writing CSS away from the developer and provide a more efficient method for making the same excellent websites and UIs. Sure, they also come with added benefits like pre-built CSS components like in Bootstrap or a design framework like in Tailwind CSS. But at their core, they’re just ways to write CSS more efficiently while you just focus on building out your website and styling it in the markup rather than worrying about naming classes and selectors.

Of course, this then raises the question of why bother with a CSS framework at all. Well, in my opinion, vanilla CSS is a powerful tool and can produce some amazing results. But, if you’re serious about building out a project and scaling it, the efficiency gains and workflows offered by CSS frameworks like Tailwind CSS are worth their weight in gold.

Final Thoughts

You might have guessed the conclusion for this post already but which CSS framework you use (or, if you use one at all), depends on you, your experience with CSS, and the situation you find yourself in.

If you’re not a designer and just want to put together a quick and easy UI for people to use, then Bootstrap might be the way to go. But, if you want complete freedom with your design and the ability to create custom designs and components easily then Tailwind CSS is the better choice.

Personally, I’m firmly in the Tailwind CSS camp; I’m definitely not an award-winning designer and I doubt I will ever be. But, because of the system Tailwind CSS has in place and forces on you, it’s quite hard to make a bad-looking design. Yes, your HTML markup looks a bit busier than normal, but I prefer having that to having to maintain separate files of CSS with their own classes, IDs, and attributes.

So, what about you, what camp do you fall into? Do you use CSS frameworks? And, if so, what is your favorite? Let us know over on Twitter!

Coner Murphy

Web Developer, technical writer, and tech entrepreneur sharing my journey to financial freedom. Building PhyType and SaaS products in public.