DevHarm's avatar

Tailwind 4 "vs" Bootstrap 5

I am currently working on an application with Vue (Inertia with Breeze) and I am really happy with it. Only Tailwind is completely new to me since I have always used Bootstrap. Now I know that Tailwind is more of a framework but in the end they both do the styling for the UI.

Since I have made all my previous projects with Bootstrap and VanillaJS, it seems like Tailwind is very complex at the start.

I wanted to convert my entire template to Tailwind but I could also use Bootstrap. But that feels a bit crooked.

How was your first experience with Tailwind?

1 like
6 replies
jj15's avatar
jj15
Best Answer
Level 10

I switched from using Bootstrap to Tailwind (in new projects) nearly a year ago. It was a little overwhelming at first because I had to figure out how to create the components from scratch (as Tailwind only provides the granular building blocks), but looking at and copying from open-source component libraries such as Flowbite and PenguinUI helped.

Flowbite (and related component libraries) also comes with the bonus of built-in JavaScript functionality for things such as modals and tooltips, something that Tailwind doesn't include.

Tailwind does require some basic CSS knowledge as that's all it's doing, letting you control your styling from the HTML. I was no CSS expert before, and neither am I now. But practice makes perfect, and there's a variety of resources out there. AI (ChatGPT for me) can also help in scaffolding basic page designs.

I found it helpful to recreate Bootstrap's container and breakpoints to make things easier and more familiar, especially if migrating a current application. This guide and example should give you a basic starting point.

Of course, if you like Bootstrap and it works for your current workflow, I don't see a big reason to change completely. I switched over as I enjoyed better control over the design and layout with Tailwind, whereas Bootstrap is a little harder to override and customize depending on how you do it.

2 likes
vincent15000's avatar

I'm not very familiar with Bootstrap.

I'm using TailwindCSS for several years and I'm entirely satisfied.

Perhaps it's a little complex when starting with, but you just have to understand how it works. Once you know how it works, you can easily do all what you need.

And there are several advantages like for example when you build the manifest, only the TailwindCSS classes that you are using are added to the manifest.

1 like
DevHarm's avatar

Thanks for the reply's. Decided to redesign my admin panel instead of using Bootstrap or moving parts. Im doing some stuff with PrimeVue with TailwindCSS right now and I like it already! Anyone used it before?

1 like
thesimons's avatar

My humble suggestion is to use Bootstrap for backend (admin, dashboards, panels, ...) and Tailwind for frontend.

When it comes to admin you really don't need to re-invent the wheel, otherwise it's a commercial application that you are going to release.

2 likes
DevHarm's avatar

@thesimons I did consider Bootstrap but when I saw the PrimeVue documentation I was sold. A huge amount of components that also fit nicely with Vue. I now use TailwindCSS for minimal styling since PrimeVue has default themes. It feels a bit like Bootstrap only more modern.

If you come from CodeIgniter with VanillaJS/jQuery/Bootstrap this is already a breath of fresh air lol...

1 like
DevHarm's avatar

I don't know if this is the right topic to continue this "question", but since I have never made a SPA I am very curious about the implementation of realtime updates; for example, is broadcasting worth it?

I am now quite far with the design of the APP itself, but I noticed that it became unclear when a test user did an update and I only saw it after a page refresh because it is of course not realtime yet.

Laravel Reverb/Pusher? Or are there other alternatives?

Please or to participate in this conversation.