Published on

Bootstrap vs. Tailwind

Author

People occasionally get into slap-fights over the tried-and-true Bootstrap vs. newer CSS frameworks like Tailwind. I’ve worked with both — and each one has a place in the toolkit. Maybe not your individual toolkit, depending on what your job requires, but at $UNIVERSITY there was a place for both.

Great, winter Laracon is set. Adam v Wes CSS showdown. Wes gets 45min to build a site his way, Adam gets 45min to replicate it in Tailwind.

Do I need a CSS framework?

I think so! Not necessarily Bootstrap with all of its opinions on how your site should look, but you want a couple things and it doesn’t make sense to build them yourself.

The first thing you want is a CSS reset/normalization. Browsers have different default styles (lookin’ at you, form elements), and you want them to all be consistent so your changes tested in Chrome aren’t a trainwreck in Safari.

The next thing you want is a unit system. There shouldn’t be any situation in which you’re specifying dimensions/margins/padding with pixels at this point — there are too many devices and too many screen sizes.

Instead, you want relative units, but you also want your “size 5 font” to be something relatively close to your “size 5 padding”, for your own sanity. You may be able to get by with rem units, but I’ve never actually tried that, so I can’t say if everything behaves consistently.

The final thing you want in a framework is for it to deal with screen size breakpoints. I don’t want to write a bunch of CSS media queries for everything. Please give me xs-col-12 and lg-col-6 so I can get on with my life.

Of course, there’s a lot more frameworks can give you. But then we start moving into the realm of frameworks having opinions, and you need to think about what you’re picking.

Bootstrap

We all see Bootstrap’s distinctive style on websites every single day. It became ubiquitous because it’s easy to use. You can copy-and-paste the official template or any component from the docs and you’re 80% of the way done with whatever you’re doing.

As an Enterprise Application Developer, having a pile of ready-made components is a boon. You don’t necessarily care about your branding in the Enterprise — maybe it’s internal software, or you have captive customers — so a logo and changing the primary brand colour covers your needs.

You’ve then got access to the 24 pre-designed Bootstrap components. You do not need to think about web design very much. All your time can be spent worrying about implementing your app and not “hmmm, fuck, the left padding on my card is off by 3px“.

Bootstrap has an almost-invisible feature: all of the components are made with accessibility in mind. This isn’t something a lot of developers think about at the get-go, but by using Bootstrap, you’re getting 80% of the work right out of the box. When somebody does say “well what about screen readers” at the end of a project, fixing the Bad Part of your app is can be achieved in a sprint instead of requiring a major re-engineering effort.

As a developer, you can be on web-design-auto-pilot with Bootstrap. It’s a huge time-saver. It’s particularly valuable if you’re hiring folks out of those coding bootcamps — they may not have spent long on CSS, so “here’s copy-and-paste components” keeps them moving right along.

I know all us old folks are like, “hah whatever CSS it isn’t that hard“, but it is a huge topic with a lot of nuance to understand. The IE era being over doesn’t automatically make CSS simple.

Of course, there are downsides. Bootstrap still depends on jQuery, so that’s a 30kb asset that you might use for one dropdown. In the world of Enterprise Software, this might not be a big deal.

I’ve been using more Vue widgets; having Vue + jQuery loaded feels unnecessary, and there’s a temptation for developers to reach for jQuery (since it’s already there). This entrenches it in your app, when you might not wanna do that. Bootstrap v5 will drop the jQuery dependency, so there’s an opportunity to shave some page load time off coming soon.

You might catch flak when your site looks like every other Bootstrap site. This is a totally fair criticism, and a result of Bootstrap being so opinionated that it has control over 95% of your website’s design.

If “looking like Bootstrap” is a problem for your site, do not try to customize Bootstrap’s components. Adjust the variables all day long — some new colours and different corners go a long way — but Bootstrap’s opinions are its strength. Once you try to fundamentally change the look of a card, you’ve left the happy path and are deep in the woods. It’d probably be better to pick a different framework at this point.

Tailwind

Tailwind stands in stark contrast to Bootstrap: it’s a utility framework. There’s no .card class for a div that gives you an accessible pre-designed card — you’ve gotta design that yourself.

I think the easiest way to explain Tailwind is an example. From the Tailwind docs:

This feels a lot like writing in-line style="width: 100%'" attributes on every element. That is essentially what Tailwind is, but you’re using the utility classes instead of style tags, so you get the responsive stuff and a unit system. Tailwind comes with an adjustable colour palette too, so all of the utilities feel very consistent and logical.

If you’re staring at a blank web page and you want to build your app, Tailwind might seem daunting. It’s on you to design every single aspect of your pages. The framework is only going to help you insomuch as it keeps your size 1 padding relative to your size 2 padding.

You, the developer, will need a strong command of CSS to use Tailwind.

Now I know what you’re thinking, “this is an atrocity, what a horrible mess!” and you’re right, it’s kind of ugly. In fact it’s just about impossible to think this is a good idea the first time you see it — you have to actually try it.

Tailwind Documentation: Utility First

If you know what you want your page to look like, Tailwind will get you there, because there are no wrong opinions baked-in to it that you’ve gotta fight.

While I mostly used Bootstrap at $UNIVERSITY for the consistency/ease, our fundraising group had their own marketing team and they provided us with bespoke designs. They knew having a button be 3px to the left resulted in an additional 0.25% of revenue, and they didn’t care that Bootstrap wanted the button to be 3px to the right instead — they needed it their way.

In that situation, having Tailwind provide me with consistent units and otherwise getting out of my way is exactly what I need. A CSS framework’s opinions are never going to match the marketing team’s opinions, so being “close to the metal” (so to speak) with CSS is perfect.