Framework Showdown: Tailwind vs Bootstrap

#webdev #css #programming #html

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

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

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!