DEV Community

Cover image for Why I use Tailwind CSS instead of Bootstrap

Why I use Tailwind CSS instead of Bootstrap

You Already Know on March 05, 2021

If you are creating a new website or with a small web development team in a short amount of time, most developers lean towards Bootstrap to help wi...
Collapse
 
nikolab profile image
Nikola Betica

Never was a fan of Tailwind or any other low-level CSS frameworks. Maybe it doesn't fit the projects I'm currently working on. But.. I don't understand that cliche "you don't have to be a CSS expert". What does it mean exactly? That you don't need to learn all of the property names? That' s true, but instead you have to learn all the Tailwinds custom classes that represent that properties. Tailwind is all about workflow, it doesn't add or subtract anything to or from CSS. It is a rewrite of CSS.

Btw, when did we start calling CSS a vanilla CSS?

Collapse
 
sauelalmonte profile image
You Already Know

You don't have to be an expert in CSS, to use tailwind. CSS original name if you look it up is Vanilla CSS. Anything else

Collapse
 
mikerogers0 profile image
Mike Rogers ✈️

I switch between Bootstrap & Tailwind quite regularly, so I'm kind of excited to see what happens in the CSS space. I did have some thoughts I wanted to share:

While using Bootstrap it is very unlikely one will use all of it's available framework classes

I think the same could be said for Tailwind. Either way, I think adding PurgeCSS to every project regardless of framework is a massive win :D

To achieve a custom look when using Bootstrap we need to write custom css. Using Tailwind CSS utility classes, it is possible to achieve any look and feel of the button without writing any css.
The biggest strengths of Tailwind is its configurability.

I think the current biggest failure of Bootstrap is that it doesn't push that you can configure it by
overriding the SCSS variables & adjusting the mixins. Plus, you can just include the parts you want instead of all of it.

Collapse
 
sauelalmonte profile image
You Already Know

Thanks for the feedback and tips, thats why I am here, to network, share tips etc.

Collapse
 
andreseduardop profile image
andreseduardop

I agree with you. Bootstrap is highly customizable. But, you have to know about scsss ...
Learning scss is challenging and rewarding in the long run.

Collapse
 
lixeletto profile image
Camilo Micheletto

I think both serve differente purposes. Bootstrap has its own design sistem, it's not intended to be used if you need to overcustomize its components. While bootstrap comes with a component design system approach, tailwind comes with a utility based approach, which basically transfer the styling resposibility to ready-to-use classes and focus in design tokens instead of design patterns. But just as B4, tailwind comes with its own problems, like the need of heavy tooling, messy HTML and non DRY approach to code

Collapse
 
sauelalmonte profile image
You Already Know

Thanks for the feedback

Collapse
 
hbgl profile image
hbgl • Edited

But!, when project's get bigger and more traffik comes to the site(s), concerns of page overload and performance arise. While using Bootstrap it is very unlikely one will use all of it's available framework classes, which equals to considerable amount of css overload as well as unused components.

I disagree with this premise. Bootstrap consists of many independent components that you can selectively enabled and disable. I also don't understand what benefit Tailwind provides over Bootstrap.

Collapse
 
sauelalmonte profile image
You Already Know

I am not an expert, just gave my opinion,

Collapse
 
abhi747 profile image
Abhinandan Khilari

But with Tailwind, we have to apply lots of css classes which makes page's HTML too big, isn't it?

Collapse
 
moracabanas profile image
mrcbns • Edited

You can brake HTML in components with any framework so your components are small.
Then you can move your VERY LARGE amount of utility classes to an old style .my-class classnames and use the @apply directive this way

@apply directive

Collapse
 
moracabanas profile image
mrcbns

And you can compile tailwind utlilty classes to .css at any moment so you can return to plain .css and it is still readable
still css

Collapse
 
sauelalmonte profile image
You Already Know

It all depends, again I am not an expert

Collapse
 
sidcraftscode profile image
sid

Love tailwind man. It's great for any project

Collapse
 
danielpaul profile image
Daniel Paul

I’m considering tailwind for my next project. But only after looking at Tailwind UI and all it’s pre-built UI componentes…

Collapse
 
sauelalmonte profile image
You Already Know • Edited

Go for it, Ithink you will like it. Again I am not bashing Bootstrap, or CSS (Vanilla CSS). Just sharing with the DEV community