Tailwind vs Bootstrap vs Vanilla CSS
What are these?
A website without styling is barely few blocks of black texts in a white background. The attractiveness , positioning , colors , placement and every visibly seen design are the causes of styling .
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
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. CSS is a style sheet language used for describing the look and formatting of a document written in a markup language. CSS3 is a latest standard of CSS earlier versions(CSS2).
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
Bootstrap
Bootstrap, As the official website itself says is the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. Bootstrap 5 being the latest version it has developed and improved a lot in the passed up to this standards.
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
The simple description to tailwind CSS as the official website itself says is,
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)
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 those of us who wants a raw experience , and write all the codes our self and learn through each step. Gain experience and mess up a few times along the way. — Vanilla CSS is the way to go
- 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)
