Here is why I switched from bootstrap to tailwind.

Hello fellow developers, this is my first blog post, and please comment if you enjoy reading experiential blogs like this one. :)

Let's Begin!

Jump to

• So, what is bootstrap and tailwind?
• My Experience of using Bootstrap
• My Experience of using Tailwind
• Which one is better?
• What's Next?

So, what is bootstrap and tailwind?

Tailwind and bootstrap are CSS frameworks.

A CSS framework is a set of CSS template classes mixed with several JavaScript features that can be used to style html elements.

why CSS Framework?

Well, again, it's a person's choice. CSS frameworks speed up styling because they are easier to implement and require less code.
When I created my first web project I didn't know about it and I spend most of my time in this project writing CSS.
After realizing this, I quickly googled and found out about bootstrap. I immediately looked up some YouTube tutorials and used them on my next web project and what was the result? I was able to devote more time to the core features and also keep the site's style neat and beautiful.

to be honest, the style was much better than my first web project :)

My Experience of using Bootstrap

Well, let's first know about bootstrap as a CSS framework.

Bootstrap has template classes for components (like buttons, lists, modals, navigation bars, etc.) as well as utility classes (like padding, display, margins, etc.). sounds good, right? Yes it is.

My experience

As I said, my first CSS framework is bootstrap. And it helped me a lot in creating projects faster and more stylishly.

But after creating several projects, I realized that most project components have a similar style. Also, when I need a button with a different style, I either have to write all the CSS for it separately, or mix in some bootstrap classes and my custom classes. Well, I did was second.

After a while, I realized that I was back to writing 1000 lines of CSS.

So what bothered me about bootstrap

well, specifically, it was component classes. Sometimes I hate the default padding, border properties for certain components.
Some of them are: buttons, input forms, modals, etc.

Also, if you look at the utility classes, there are only a limited number of options available for each utility.

ex: padding (p-1,p-2,p-3,p-4 and p-5)

So, for example, if I need a specific value on a utility for an element, I write a separate CSS class for it, or use an inline CSS style (❌ not recommended, well, if you're wondering why, either you can google it or I'll write a little blog for it:)).

However, I would recommend bootstrap to all beginner frontend developers and people who are a bit weak in design.

Trust me, if you think your design skills are weak, create a few projects with bootstrap, and slowly but steadily you will learn so many design basics to style each component

My Experience of using Tailwind CSS

Well, let's first know about Tailwind as a CSS Framework.

Tailwind is a CSS utility Framework, which means that, unlike bootstrap, Tailwind does not come with pre-built component classes.

Well, that means basically you'll be styling each html element on its own with the utility classes it provides.

So how exactly does Tailwind help you as a CSS framework?

-Tailwind has utility classes for almost all CSS classes, including pseudo-elements.

-Tailwind also supports providing explicit values ​​to any utility classes that support it. (eg: p-[10px], width-[80vw] etc.)

-Tailwind also supports writing classes specifically for dark mode.

My experience

I have been using Tailwind for 4 months now and I really like it.

For me, learning Tailwind wasn't that hard because I've used utility classes with bootstrap before.

One thing I quickly noticed is that some utility classes have shorter names compared to bootstrap.

For example:

CSS -> 'display: flex' 

Bootstrap -> 'd-flex'

Tailwind -> 'flex'

//CSS-> justify-content: center

Bootstrap -> 'justify-content-center'

Tailwind -> 'justify-center' 

I used this example because flex is something I use a lot on my websites.

But one thing should be noted. if you want your project to be completed quickly (like a college project, which has to be submitted in a deadline), tailwind may not be the best choice.

Now my projects have their own unique style and that's what I really like.

If you have time, you can check out my personal website which is styled using Tailwind CSS.

One more note: since Tailwind doesn't come with pre-built components, does that mean you have to code everything yourself? Probably no. There are many component-based libraries like Headless UI, Radix UI (primitives), etc. that coded the component's skeleton and logic, you just need to style it.

Which one is better?

To me, this is clearly Tailwind CSS. But, as I pointed out its positive and negative sides, the choice of a favorite is up to you.

Well, this is where my personal opinion about bootstrap and tailwind ends.

So what's next?

Well, there are many more CSS frameworks like Material UI (MUI), Bulma, Foundation, etc.

But there is one more thing called "CSS-in-JS", which is not a CSS framework, instead it is considered to be a better way to write CSS for the modern web applications. There are many libraries that use this, such as Styled Components, Emotion, Stitches, and so on. This is what I will try next.