Tailwind vs Bootstrap vs Vanilla CSS

What are these?

Styling in a website can be done in many ways. The most basic way of doing it being using CSS or more to be precise using vanilla CSS. But its not the only way we can style a website . Many tools were built throughout and improved the way websites were built and styled up to this date.

Bootstrap and Tailwind CSS also belong to this category of advanced styling tools or in other words frameworks. What I mean by advanced here is not the way its used , but the way its built. To be precise with frameworks our work becomes much easier.

Simply to give a small idea , all these things does the same thing: styling in a different way.

Vanilla CSS

CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes. Also compared to other frameworks , vanilla CSS is much more bendable and customizable . And most importantly even the frameworks itself are made out of classes and attributes taken from CSS.

(https://theopengate.org/) -You can view and inspect this website purely made out of basic vanilla CSS

A website I made using vanilla CSS

Bootstrap

Giving a vast array of prebuilt codes just to be added as classes to a page is the most important feature that bootstrap provides. Saving thousands of lines of manual codes and the time to type them.

Also the bugs and code errors are minimal or almost none because its prebuilt and tested . Over the years the framework has made shown great responsive features. But the flexibility of bootstrap compared to other frameworks and vanilla CSS is somewhat questionable .

Tailwind CSS

Rapidly build modern websites without ever leaving your HTML

Explaining further Tailwind gives us the opportunity to write all the code in out HTML file itself . By giving us fully customizable classes which can be directly applied to the HTML tags itself.

I’ve written a few thousand words on why traditional “semantic class names” are the reason CSS is hard to maintain, but the truth is you’re never going to believe me until you actually try it. If you can suppress the urge to retch long enough to give it a chance, I really think you’ll wonder how you ever worked with CSS any other way.

~Adam Wathan (Creator of Tailwind CSS)

A website I built totally with Tailwind CSS

In my perspective the main advantage of using Tailwind CSS is that it does the work of vanilla CSS and Bootstrap combine in a more flexible way. Meaning its more advanced and gives a lot of prebuilt functions than Vanilla CSS. But also its much more flexible and can be manipulated to our will than bootstrap.

So which one is Better?

This answer is totally up to the use to decide.

  • For the ones who just wants to get the Job done immediately and doesn’t care much about the similarity in the page compared to others . Then the way to go is — Bootstrap
  • And for people who wants to taste a bit of both worlds and requiring a much more user friendly flexible experience. Along with time saving and raw experience combined — Tailwind CSS is the idea choice

Test out all 3. And even more are available out there in the world to be discovered.

Don’t choose because someone says so. Chose what is best with your own experience . ~AK (Me)

Undergraduate of Software Engineering University of Westminster UK.