DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Framework Showdown: Tailwind vs Bootstrap
Joseph Maurer
Joseph Maurer

Posted on • Originally published at josephamaurer.Medium

Framework Showdown: Tailwind vs Bootstrap

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!

Top comments (5)

Collapse
zakiazfar profile image
Mohd Ahmad

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
Mohd Ahmad

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.

Head to your account's Settings to...

🌚 Enable dark mode
πŸ”  Change your default font
πŸ“š Adjust your experience level to see more relevant content