It’s been about 8 months since I wrote my mediocre / bad / terrible attempt at satire of a blog post when Bootstrap 4 came out of beta. In summation, I remarked it as great improvement over Bootstrap 3 and it has been serviceable for many of our projects from then.

But honestly… I am a little bored of it after having used them in few projects. I’ll specify because I don’t mean this as a knock on Bootstrap; I am a little bored of taking the same old approach with front-end with it.  So I’m happy to finally get the chance to look into Tailwind and how it brings another option to the table.

If you have not yet heard of TailwindCSS, please check out the official website. Rather than summarize what Tailwind is and how it works, I have summarized my opinion why and when one should consider TailwindCSS.

No writing “override codes”

As a developer who deals with most of the front-end work, I had the pleasure of working with handful of talented graphic designers. They bring their original designs to me and I work to bring them to life. A lot of the times, I tend to write a lot of CSS to to override Bootstrap’s default view into what matches designers’ visions. 

For that reason, the feeling of excitement when creating something original is taken away when starting the project with Bootstrap.  A lot of the initial work goes into undoing Bootstrap’s original design.

Because TailwindCSS provides low-level classes, they can be used to stylize DOM elements from ground-up quickly while allowing originality and customization.

Along with the tedium,  writing override code one after another can lead to bloated CSS file. Which brings to my next point:

It allows me to write concise CSS

Through my years of doing front-end work,  I have turned into a stickler when writing CSS; I stick to my personal convention to ensure that CSS are clean and maintainable as much as possible.

However, as the size of the project grows and other developers are brought on board to share the frontend, it becomes difficult to maintain my personal convention. End result is often huge CSS blocks that eventually become chore to maintain and read.

TailwindCSS provides utility classes that works as concise form of CSS properties which allows flexibility to style it via inline method with ease. With inline styling more accessible through Tailwind, creating faster UI with less CSS code is possible.

Create CSS component

The utility classes can be grouped to create components to easily main recurring elements with the ‘@apply’ which brings us more options on creating reusable stylization and applying them more accessibility. (It’s really self-explanatory!)

Conclusion

But in the end what would determine the choice between Bootstrap and TailwindCSS (or even Vanilla CSS) is just matter of personal preference, the project itself and its timeline. Having recently finished a small project that is two weeks worth of work in a week to meet client’s deadline, Bootstrap’s already-made components  such as carousels, accordions and modals were invaluable.

Although Tailwind’s features I have summarized above seem minuscule at first, I see its benefits add up to be invaluable when working on a much bigger and long-term project.

So to summarize, getting a product to launch while facing time crunch, Bootstrap is a solid choice. However, when building a large project from a ground up with potential of having multiple front-end developers, TailwindCSS deserves a strong consideration for how it advocates concise code and maintainability.

It sounds like a cop-out but here is my finalization: Bootstrap 4 is great and so is TailwindCSS. It’s good to have options.