Tailwind vs bootstrap: CSS frameworks comparison

CSS frameworks are the barebones of responsive and attractive websites; doing away with them would make web development a costly, time-consuming affair. It is easy to think that everything can be done with vanilla CSS and while this is true, using a framework when time is a crucial factor might be the best option rather than relying on vanilla CSS. I loved writing vanilla CSS but when I used a framework for the first time, I realized it's much faster and more efficient, especially when it comes to responsive designs.

Tailwind CSS and Bootstrap are two of the most popular frameworks that appear in any conversation. Of course, there are others like Materialize, Bulma and Foundation but I think we can all agree that Tailwind and Bootstrap are at the top of that league. The first framework I used was Bootstrap and while it is great, it does have its downsides which I will talk about in a minute. I recently started using Tailwind and yes, it also does have its downsides. Both frameworks have their pros and cons but the good thing is that they both have their own way of doing things and you can use any depending on your needs. Now let's get an overview of these frameworks, starting with Bootstrap.

---

Bootstrap

Bootstrap is the oldest framework here as it was released way back in 2011 by Twitter. It is a robust framework that focuses on using pre-built components and templates, making it easy to build responsive and consistent websites very fast. The first time I used Bootstrap, I built a webpage within hours and that would have taken me a few days if I had to rely on just vanilla CSS. As I said earlier, these frameworks are meant to get you up and running very fast, and Bootstrap is very good at that.

Tailwind CSS

Tailwind is currently my favourite right now and that is because it is a utility-first framework that gives you a lot of flexibility and customization, that is one area where it outshines Bootstrap. Tailwind was created by Adam Wathan and Steve Schoger and it was first released in 2017. Tailwind also helps you build websites much faster as it gives you small, single-purpose classes which you can combine to create custom and responsive designs. It doesn't offer pre-styled components like bootstrap and that's the great thing about it.

---

Examples

Let's look at how you can create a button with both of these frameworks. For bootstrap, it is quite easy and fast;

<button class="btn btn-primary mt-5 ms-5">Bootstrap</button>

Just the first two classes are enough to give you a ready-made button. The others are just utility classes to give the button some margins (top and left margins).

Meanwhile, for Tailwind, you can do the same thing with this;

<button class="bg-blue-600 text-white rounded-md mt-14 ml-12 px-4 py-2" type="button">Tailwind</button>

You can now see the difference between both of them. There are a lot of things going on in the Tailwind code just to create the same button I did with Bootstrap with just 4 classes.

With Bootstrap, the btn and btn-primary classes already applied colours (background and text), border-radius, and paddings to the button while for Tailwind, you will have to add those things yourself. Let's look at the key differences between both.

---

Customization

From the example I gave, you can already see his highly customizable Tailwind is. I can use whatever colours I want and I can easily adjust the paddings. With Tailwind, you can achieve unique styles and it is hard to tell if a website is built with Tailwind (can't say the same for Bootstrap). Tailwind also has a configuration file where you can add your own custom CSS styles and with that, you can create any design imaginable.

Bootstrap on the other hand can be a pain to customize as it relies heavily on its default design system and you will have to override existing styles to get the custom design you want. At one point you might need to dive down into its sass files to make lots of changes and you might find yourself using lots of !important in your custom CSS, at that point it's probably better to just write vanilla CSS or look into other frameworks like Tailwind. As I said earlier, it's quite easy to identify a website that was built with Bootstrap because they mostly all look alike, due to relying on the default design system having pre-built components

---

learning curve

Tailwind has a steeper learning curve, considering you have to memorize those classes and know how to combine them to create a custom design. You have to have a deep understanding of CSS to master Tailwind and from what I have seen after using it for the past few weeks, it can be very daunting when you're using it for the first time to work on big projects.

As for Bootstrap, it's fairly easy to pick up for beginners as you don't have to worry much about building everything from scratch. The component-first approach makes it easy to get up and running very first without worrying much about the smaller details. I learned how to use Bootstrap within a day and you don't even have to memorize the classes as you can easily find what you need on their documentation, although it's best to memorize them for faster implementations.

---

Development speed

From the button example I gave above, you can see how it takes less time to do that with Bootstrap than using Tailwind. Because of its component-first approach, it's much faster to develop websites with Bootstrap. You can create a functional website within hours with just a little JavaScript because aside from CSS styles, Bootstrap also adds functionalities and you can see that in things like its modals, carousels, dropdowns, and so on.

Tailwind has more upfront work, after all, building components from scratch takes time and effort, even though you already have all the utility classes you need. Although Tailwind has more customization and offers greater control, it does take more time to build a website using it.

File size

Using Bootstrap means you're signing up for the whole package, which means you end up with a big file size even though you don't use all its styles in your project. This can make your website slower as it adds a lot of extra things you might not need. Tailwind offers a smoother experience with a small file size because you only take what you need and it even strips your final CSS file of all unused styles. So, from a performance perspective, Tailwind is much faster than bootstrap.

---

What makes them better?

Bootstrap offers fast prototyping and is ideal when time is crucial and you don't care much about deep customization or achieving pixel-perfect designs. With its pre-built components, you can build up websites fast which can be great for testing new ideas without spending much time on designs.

Tailwind shines when it comes to highly customized designs as the utility classes help you to achieve pixel-perfect designs. If that is not enough, you can also easily integrate your own custom CSS into it through its configuration file. Tailwind offers more fine-grained control over your design and it's perfect when you want your website to look exactly like the design.

---

Bonus section: HNG internship

I just started an internship with HNG and I would say it's a very exciting experience. I registered for it a month ago and have been looking forward to when I will begin as this is my very first internship. I am a self-taught frontend developer and I don't have real-world experience yet, so this internship will certainly be a way for me to grab as much experience as needed. Another exciting aspect of this internship is that I now get to connect with a lot of people doing the same thing as me because right now, I don't have any friends in the tech world and it can be quite boring when you're learning alone.

I heard HNG uses ReactJS and that's even great because I love React. I just started learning it though but so far, I love the features it has. I know there are a few downsides to it and that makes some people prefer other JavaScript frameworks like Vue and Svelte but is there a perfect web technology out there? All of them have their pros and cons and it's up to you to decide which one to use. Just pick your poison and make peace with it. I look forward to using React during this internship program and if you're also interested in the HNG internship (which is remote by the way, you can join wherever you are in the world), feel free to apply here. You can also check out the HNG premium network which offers lots of benefits like CV reviews and daily job offers.

---

Conclusion

Both Bootstrap and Tailwind have their unique benefits and picking one over the other depends on your needs and personal preferences. I prefer Tailwind because I love having complete control over how my project looks which is something Bootstrap doesn't offer out of the box and even though you can customize it with lots of effort, you still won't be able to get pixel-perfect design. But for meeting deadlines and testing out ideas, bootstrap is the perfect option to go for as it offers pre-built components and you don't have to worry about building everything from scratch.

Thanks for reading

Connect with me on:
Twitter: @kushyzeena