Switching from Bootstrap to Tailwind
We’re switching from Bootstrap to Tailwind and want to share some thoughts and a little surprise at the end!
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
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: