DEV Community

loading...
Cover image for Framework Showdown: Tailwind vs Bootstrap

Framework Showdown: Tailwind vs Bootstrap

mwrpwr profile image Joseph Maurer Originally published at josephamaurer.Medium ・3 min read

Source: Zoltan Szogyenyi

Exploring a new css framework is like Christmas for anyone who loves to tinker with user interfaces. Recently, I came across an awesome blog post from Leonardo that tries to make an argument that you should start using Tailwind instead of <insert your css framework of choice here>. For me, I’ve always found Twitter’s bootstrap framework to have the most compelling set of features. But if I’m really going to make the switch, the argument needs to be more compelling. Here’s a compare and contrast of the two frameworks.

Compare and Contrast

Both frameworks are utilities that help you define dynamic and reactive websites. Bootstrap has been around for 10 years and is the larger, more popular framework. Tailwind CSS is still growing in this area and has recently gotten a community of developers who are talking about its abilities. The main difference between the two frameworks is that Bootstrap ships with a large set of components. Personally, I think that there is no reason why Tailwind could have a similar set of basic components to help people make websites.

Documentation

Source: MB Bootstrap

Adoption rates for any platform or framework depend heavily on how much documentation is available. In both cases here, the documentation is really good. Tailwind even has a dedicated YouTube channel where they walk through new features and tutorials. Where Tailwind struggles is that they don’t have the vast library of examples like Bootstrap does.

Speed

Source: Marc-Olivier Jodoin

Tailwind has a JIT compiler that allows you to really optimize file size and speed at which the page is rendered. A big drawback of Bootstrap is that even if you aren’t going to be using modals and accordions to make your website, you still have to load all of the required files. Even after minifying all of the requirements, Bootstrap is around 308.25kb. Compared to Tailwinds 27kb, Tailwind is going to be able to render way faster.

Conclusion

I think that if you are tackling a small project and are okay with the idea of creating a lot of the components yourself, you should be open to trying out Tailwind. Just messing around with it so far, it does save you from having to write a bunch of css code. The benefit isn’t the code however, the benefit is the JIT compilation and small file sizes. Bootstrap is way over bloated and can’t easily be paired down so it’s unlikely to change at this point. It might come down to preference, but knowing that options like this exist are fun!

Thank you for reading this far. If you enjoyed this post, please share, comment, and press that ♥️ !

Follow me on Twitter and Dev if you’re interested in more in-depth and informative write-ups like these in the future!

Discussion (5)

pic
Editor guide
Collapse
zakiazfar profile image
zakiAzfar

Tailwind is my love

Collapse
mwrpwr profile image
Joseph Maurer Author

What’s the #1 reason you pick Tailwind over any other option?

Collapse
zakiazfar profile image
zakiAzfar

TailwindCSS is highly customizable, so it gives a unique look to our UI, bootstrap always gives the same boring UI.

Thread Thread
mwrpwr profile image
Joseph Maurer Author

I agree, because Bootstrap has been around for so long it’s starting to look old 😅

Collapse
bigbott profile image
bigbott

PureCSS - 3kb.