Bootstrap for me is a comfort zone. I chose bootstrap for this blog because I knew I'd have the site running quickly and didn't want to spend hours creating a custom design. It's easy to get up and running in most cases and since I've used it for so long the syntax is simple. Sites look clean and are responsive without much work.

Before I get into setup with Rails, I want to talk about the actual syntax and styles of the frameworks.

For example here's a button in bootstrap:

<button type="button" class="btn btn-primary">Primary</button>

Simple right?

Meanwhile, Tailwind comes in and its buttons look like this:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

That's almost twice the amount of information and is simply more work....or is it?

Let's compare the two directly. With the CSS classes in bootstrap, you're first turning the button into a styled button with btn and btn-primary decides the color. See the guide for bootstrap buttons here. As you can see from the guide there aren't many options available for buttons. You're fairly limited in how they look, their size, etc. You can chain a few elements such as margin padding for additional styling.

If you install the Tailwind css extension in VS Code you'll find that the blob of classes makes a lot more sense very quickly. bg-blue-500 = the color of the button. Hover covers what color it becomes when yo hover over it. text-white is the text-color. Font-bold covers the font styling. py-2 is the vertical padding, px-4 is the horizontal padding, rounded means the button is rounded. That's it!

Once you take into account that you'll likely need to add margin/padding to your bootstrap elements, it ends up looking pretty similar to tailwind in most cases.

I built this Short Chats Forum with Open AI website to test out the Open AI gem and practice with APIs. I also figured it'd be a good opportunity to set up a rails app with Tailwind. I was able to get the app setup and looking good very quickly. You can easily setup Tailwind with your rails app following this guide or if you're starting a new app you can run:

rails new my-app --css tailwind

I usually add postgres here too when starting a new app, as it saves time later.

With Bootstrap the same thing works, but I've had it break on me a few times and needed this guide to troubleshoot.

rails new my-app -j esbuild --css bootstrap

In both cases a hidden step is running:

rails assets:precompile

Once you've set that all up, creating Rails model scaffolds will automatically style them with Tailwind. Bootstrap does not do this, you'll need to manage your forms and content individually.

Another useful tool with Tailwind is creating your own classes using @layer. I haven't had to use this much, but you can simplify commonly used tailwind for consistency. I haven't found the syntax to be too complicated so far, so I haven't needed it, but I can see the usefulness of this feature.

There is one major downside to Tailwind and I've yet to find a solution. When you make changes to your style it won't be reflected until you've run the assets precompile. This applies to every teeny tiny change. On paper you should be able to run:

./bin/dev

To start your sever, but for some reason that doesn't work. My workflow is to make changes, run assets:precompile, and then restart the server. This will update your Tailwind CSS.

Overall it's hard to say which is "better, I think bootstrap looks nice, but ends up looking a bit "samey". Tailwind gives you much more flexibility without much more effort, which has me leaning more toward it. When working with Rails I found Tailwind to be simpler to setup and am considering using it on all future projects, but maybe my opinion will change when Rails 8 comes out.

Regardless, front-end web design is a bit of a pandora's box with all the different frameworks these days. I think the best you can do for yourself is just try a few out in small projects and then scale accordingly. You might end up feeling like this however:

Which could be worse, at least you're Ed Helms!