DEV Community

loading...
Cover image for Why I use Tailwind CSS instead of Bootstrap

Why I use Tailwind CSS instead of Bootstrap

sauelalmonte profile image You Already Know ・3 min read

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 with the design. The reason for this, is ease of use, tons of documentation and plenty of "predefined css components" which is why Bootstrap is popular.

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.

Tailwind to the rescue!!!

Tailwind is a CSS utility framework, some call it a "utility bundle" for rapid UI development, (my go to for quick development). Why? Tailwind doesn't provide a default theme or any predefined UI components, it is unlikely to get two different web pages, designed by 2 different developers and the web pages would look the same or similar, allowing the developer to have an identity/signature.

With Tailwind CSS, there is no limit to the imagination, designing is structured in a way so developer's are able to create their own ruleset to avoid css overload or repeated properties.

All utility classes can be reviewed in the Tailwind CSS documentation as well as the tailwind.config.js file, which will be located in the root of a project after installation. Every available class can be configured for small and larger project's.

Example of styling a button using tailwind and Bootstrap:
I am using VSCode as my Text Editor

Output:
Tailwind CSS vs Bootstrap

Bootstrap predefined button design is achieved. 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.

WHY!?

You will have the ability to create personal UI design, identity and branding without writing a bunch of custom CSS (you don't have to be CSS expert)

The ease of creating Responsive websites/web apps

Tailwind utility class behave in a responsive behaviour. This allows for effortless creation of responsive components without writing additional CSS. Tailwind provides a simple method of putting already existing utility classes into a responsive context. Using the prefix {screen size}:{class}. Look at the above example, if you want to change its color, size etc. depending on the screen size (desktop monitor, laptop or mobile smart device) we have to add the following:

Look at line 23
Alt Text

Output:

Site being viewed on a laptop
Alt Text

Site being viewed via smart device
Alt Text

Tailwind responsiveness implies that the page is going to be created for mobile screens first. Adding bg-red-500 tells the background of the element changes to red if the size of the screen is small. If the size of the screen is medium-xl than the size has to be applied"md:class lg:class axl:class " represents the color of the background change to yellow (bg-yellow-500).

These are the predefined screen size options in Tailwind:
Alt Text

The possibilities are endless!

You can configure/customize Tailwind Utilities

The biggest strengths of Tailwind is its configurability. In every Tailwind project is the tailwind.config.js file located in the root of the project (must be in the root of project/directory). It contains all the configurable utility classes and colors. This file doesn't exist unless the user generates it. If there is no config file the utility classes are the same as mentioned in the official documentation. To learn more go to Tailwind documentation

Tailwind is simple, professionally made, well documented and worth your time. It made my workflow better, faster and helped me understand CSS (also known as Vanilla CSS), made made projects uniform and reduced the amount of CSS I wrote over the course learning it. None of my projects look the same, the creator of Tailwind (Adam Wathan) is an experienced guy in the industry and is continuously improving Tailwind. (Adam Wathan) also wrote a book Refactoring UI that I recommend you read!

In short, Tailwind is the love of my life...

Discussion (13)

pic
Editor guide
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 Author

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 Author

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

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 Author

I am not an expert, just gave my opinion,

Collapse
sidchaudhary04 profile image
Siddharth Chaudhary

Love tailwind man. It's great for any project

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 Author

Thanks for the feedback

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
sauelalmonte profile image
You Already Know Author

It all depends, again I am not an expert

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 Author • 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