Why do we use Tailwind CSS and less Bootstrap?

April 30, 2020

There is absolutely no discussion about the fact that Bootstrap is a wonderful framework and it has changed the way we design websites. It’s one of the greatest toolkits for handling the mobile first approach in the best manner. The Bootstrap grid is a true revolution for building layouts of different sizes and shapes through the 12 column approach. We should all use Bootstrap, or not!?

Well, that’s the real problem. Bootstrap is wonderful and almost every front end developer knows how to use it. One problem with Bootstrap is that developers tend to use it for quickly creating responsive websites and the result is that most of the websites look the same. This wonderful framework is being overwhelmed and there’s the need for change.

Tailwind CSS is another wonderful new framework that intends to ease the building of web applications and speed up the process. While Bootstrap has default themes and many ready made built-in UI components, Tailwind doesn’t impose design decisions. Bootstrap’s components can be used very easily by simply calling them and voila. With Tailwind you need to write specific codes for every component. This makes it highly customizable and your design can take any shape that you need, without any restrictions.

Working as a freelancer or developing websites for clients that have no exact predefined design, can be easily done through Bootstrap as you can twist the design to meet the possibilities offered by the framework. However, sometimes we have very specific design requirements that need to be met, and that’s where Tailwind provides a wonderful solution.

Just like with Bootstrap, Tailwind also has a CDN that you can use, but it doesn’t have all it’s features and thus it’s much better to install it. You can easily install Tailwind through npm by using

npm install tailwindcss

or if you just want to give Tailwind a try, you can also do it through their Tailwind CLI tool for processing the code. By including Tailwind in your build process you have access to all features that are otherwise not possible with the CDN.

According to the Tailwind website, the framework is very heavy in its original form, much more than the other solutions like Bootstrap and co. However, by using PurgeCSS to remove unnecessary CSS, you can greatly reduce its size and make it the lightest of them all. The final product of your Tailwind CSS file is not more than just a mere 10kb of compressed CSS.

We usually implement Tailwind CSS while building static websites with jigsaw or even with more complicated websites using Laravel. Tailwind has greatly improved our efficiency and effectiveness in developing professional websites that are delivered much faster than before. By using the design properties provided through Figma and the utilities of Tailwind, our designers and developers are working in great synchronization.