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
@applyin 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.
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.macrowith 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.