Switching from Bootstrap to Tailwind

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. The first version was released in 2012.

If you do anything related to the web, you’ve probably heard of it. Bootstrap is used by over 22% of all websites!

There’s a reason Bootstrap is so popular: It is easy to set up and manage, it has a lot of components, a good grid system and basic styling for many basics HTML elements, and it’s easy to learn. Let’s look at a short example of Bootstrap code:

<button type="button" class="btn btn-primary">Primary</button>

Blue, primary button – two classes, that’s it; everything else is standard HTML code.

Bootstrap on our side

Bootstrap was added to the Testomato code not long after the first public release, by commiting ebddecd5 on February 3, 2012. Since then, we have updated this library on almost every publicly released version. It was usually a quick process with a lot of benefits.

Why we decided to switch

Bootstrap once helped us move quickly and efficiently –but that’s no longer true as we move more and more away from full-page generation to components. You have to change a lot of PHP templates, HTML templates, Javascript code and general CSS for other non-Bootstrap components.

Sometimes, new versions of Boostrap bring non-expected back-compatibility breaks to our code. More and more CSS code was needed to fix unwanted behavior of Boostrap code – and our CSS became huge (~200 Kb), ugly, and full of unused CSS rules as a result.

Tailwind is the new guy

Tailwind CSS was initially developed by Adam Wathan. The first version was released back in November 2017. It is a utility-first low-level framework used to apply CSS. Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build customized designs without any annoying opinionated styles you have to fight to override.

Let’s look to the same example as before, the blue primary button:

<button type="button" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-3 rounded">Primary</button>

As you can see, nothing is hidden somewhere in CSS – atomic classes can be deleted or copy/pasted to HTML, JSX, or even PHP templates. Tailwind compiler automatically adds to compiled CSS just those classes that are used.

What does this mean for you?

Testomato will soon bring you a new, much more consistent, fresher design. Take a little peek here: