I appreciated this bit of nuance from a post on Viget’s blog:
There could be a whole article written about the many flavours of Tailwind, but broadly speaking those flavours are:
1. Stock tailwind, ie. no changes to the configuration,
Leo Bauza, “How does Viget CSS?”
2. Tailwind that heavily relies on@apply
in CSS files but still follows BEM or some other component organization,
3. Tailwind UI, and
4. heavily customizing Tailwind’s configuration and writing custom plugins.
The way you use some particular technologies can be super different from how someone else does, to the point they share little resemblance, even if they share the same core.
Bootstrap is similar. You can link up Bootstrap off a CDN, the entire untouched built version of everything it offers. You can download the Sass/JavaScript source files, include them in your own project, and bring-your-own build process. This gives you the ability to customize them, but then that complicates the upgrade path. Or you could use Bootstrap from a package manager, meaning you’re referencing the source files from your own build process, but never touching them directly. Either way, if you’re using the source, you can then do things like customize it (change colors, fonts, etc.), and even trim down what parts of it you want to use.
React is similar. Vue is similar. You can link them up right off a CDN and use them right in the browser with no build process. Or they can be at the heart of your build process, and pulled from npm. Or they can be the foundation of a framework like Next or Nuxt.
When you multiply the fact that any given single technology can be used so many different ways with how many different technologies are in use on any given project, it’s no wonder why developer’s experience on projects is so wildly different and you hear a lot of people talking past each other in debate.
If you’re using option 2 — @apply and BEM — it’s worth taking a look at a tiny Sass framework I just release; built for this purpose. It’s much better suited for design systems and large scale projects: (glidecss.com)[https://glidecss.com].
Thank you Chris for pointing out the problem with these debates.
Those “12 reasons Bootstrap is bad for you” or “Why you shouldn’t use React” really frustrates me as if you can’t configure the heck of these tools to suit your needs.
Our product is making the transition to using
twin.macro
with Emotion to give us a nice combo of Tailwind (and its configurability) and CSS-in-JS agnostic to any view library. We use React, so it fits really well!Pretty excited to see how well it boosts our ability to prototype UIs quickly!
I use Bootstrap 5 almost all the time at work but when I’m freelance, Tailwind is really becoming the star. The PostCSS purge features and the way md:feature and hover:state classes work is so elegant. My only complaint is that you need to generate very long utility class strings to do some stuff that could be “button” like bootstrap but I get why they take the unopinionated approach with it.