Vanilla CSS vs Bootstrap vs Tailwind: An Analysis

Hi Victoria,

I tend to disagree on the part you hardly use Vanilla CSS. I'm my company we almost solely use Vanilla CSS Because of the non basic designs we get.

We do however write our own SASS "tailwind" basics with all margin/colors and paddings.

Tailwind itself I think would be a good fit, but I would strongly advise people to try and recreate massive sites like Facebook in pure CSS. Just for the experience :D

(Or make CSS Art)

Great one Victoria Lo!

So for my verdict, it depends (I know, boring answer).

Yes. But can't think of a better answer than this. It truly depends as you have explained. Thanks for sharing.

I prefer the vanilla CSS. I'll share and tell my bad experience with Bootstrap framework.

I used to make part of a team which used to contain only two persons — one CEO and one iOS app developer. Before I entered in their team or they knew me, the iOS developer used to take care about their new site, but he did not understand the web development and made numerous mistakes in their site.

I saw their new social project, was interested and sent feedback to them for improving their new site. But I did not imagine he has used Bootstrap. Then I joined their chat group and sent feedback to them. When I told I have been newly graduated in computer science and worked with IT areas, they have been interested, contacted me and invited me to make part of their team.

The iOS developer delivered me their new site in my hands. I found numerous mistakes and discovered he used Bootstrap. I corrected and fixed hundred of mistakes, reorganised the CSS, optimised the site, replacing some unnecessary things for pure CSS. But I discovered that he also created hard-coded third-party codes, what made the site unfriendly to the responsive design. He also forgot the importance of UI/UX design principles and of accessibility (blind people, dark mode for people with photophobia like me and deaf-born people like me).

Due to some hard-coding and the unfriendliness of the site to the responsive design, unfortunately Bootstrap and the hardcoding forced me to use terms of multiple fixed width layouts. I knew it is very bad idea, then I was screwed up.

Then I redesigned the site for the mobile phones with less than 240px and less than 412px, and discovered that that one media query was not loaded. I and my best friend from Canada investigated and spent hours, trying to figure the cause. We thought it were other fixed media queries, but did not imagine it was Bootstrap. That forced me to create the separated CSS files and add links to HTML file's head, and they were loaded. Until the second query was not loaded, I did not understand. I and the Canadian investigated again, and I discovered that it was Bootstrap, because Bootstrap used max-width: 991px, which includes all the phones and tablets, bypassed these media queries and prevented them from loading.

After all that, I have had a very long talk with my best friend from Canada. He analysed both the original and new (with frameworks) sites, and said he was going to facilitate the original site, but hours later, he told me he gave up, because he said Bootstrap has many breakpoints, what mean much complexity. He said big or small changes, even if with Bootstrap, also mean complexity, and high complexity results in a big number of bugs. Bootstrap hides complexity and the people are unaware of that. He understood perfectly my pain, my sufferance and my insanity when I deal with Bootstrap.

Finally, I do not want to deal with Bootstrap problems. I can not maintain the mixed CSS. CSS using mixed Bootstrap and third-party codes is unmaintainable and unsustainable.

Thanks for this article. At the end, Tailwind needs to have better CSS's knowledge than Bootstrap, isn't it?

Nice write up Victoria Lo

Though I also think that vanilla CSS will still be mostly used part

Frameworks exist for quick and fast solutions though for CSS, these add up to the final bundle and many optimization compromises if you add whole framework to your project.

Customization of Lib/Framework is really necessary.

Personally I as I am doing Frontend in React, and we are using SCSS on top of Bootstrap, I still don't feel like using Bootstrap as I know that I can achieve the same with much smaller vanilla CSS

And my preferences have started to shift towards CSS-in-JS

I had many interesting conversations related to the use of Tailwind and I agree with them completely. It's a utility framework and should be used when one doesn't want to touch vanilla CSS

With Bootstrap, one will always have to add some customizations with CSS

I've used Bootstrap for a while and even though it's great in terms of cutting down the time on making a presentable responsive design, I usually end up using vanilla CSS since I have flexibility on what styles I want to appear. I haven't tried Tailwind, but I've been using Bulma since it's lightweight and their predefined styles are neat.

Another great article! I was just poking around with some tailwind tonight and got to wondering how it compared to bootstrap in terms of usability. Thanks for the insight!

Thanks Vic, another great article 👏 I use vanilla for my own projects even though I know I should be using some framework.. But Bootstrap all the way when building in teams!

Awesome article 👍

For now I only use vanilla CSS, well including SASS. But if I'm to go for a framework, I'll pick Bootstrap first cause I heard alot about it 🙂, then Tailwind.

Wonderful resource Victoria lo.

For my verdict I like to be creative with my css ,I mostly use vanilla css ..

Nice article, what about sass, sass can be use with everything on this list

I used bootstrap on my first web dev project. I found it really confusing to edit, (likely because I was so new). I have used vanilla (sass or styled-components) since. It feels a bit more straight forward to implement what I want, and has the largest community/examples.

If you are in a group that is really proficient with a framework, or needs to crank out a lot of different sites quickly frameworks make sense.

Awesome article. I think I know which to be more focused on now

Have you had a look at TailwindUI?

Great article Victoria Lo I have used all of them, i agree with your opinion too