Hacker News new | ask | show | jobs
by Wolfr_ 2042 days ago
I don't get why Tailwind is so hot. Do any of you actually maintain large custom design systems?

Where the same system is used across multiple code bases, with varying components, where you need to be able to accurately replace the look of a component, that might be coded in multiple dev environments (Angular, PHP, React...)?

If so, you would be running away from this approach fast. BEM/ITCSS all the way. How would you globally replace something that is marked up like this (example appears somewhere else in this thread)? How would you assert what this code means across projects?

    class="text-4xl sm:text-6xl lg:text-7xl leading-none font-extrabold tracking-tight text-gray-900 mt-10 mb-8 sm:mt-14 sm:mb-10"
With BEM/ITCSS, you would have a custom namespace like `auk`:

    class="auk-btn auk-btn--primary"
And you can reason about it, maybe in project 2 it is

    class="auk2-btn auk2-btn--primary"
So now you can refactor the old buttons out to replace the new buttons. Good luck with the mess above.

If people say: you can use `@apply`. Yeah. If you write your whole stylesheet in `@apply` logic, why are you using Tailwind at all?

Design tokens and the re-use of design variables is not a Tailwind thing by the way. Some people seem to be acting like it is. We've had variables in Sass for over since 2009. People have been doing clever things with variable maps (arrays) in Sass since forever. There's no way Tailwind can take credit for this.

I've written extensively about why Tailwind is problematic:

(1) https://johanronsse.be/2019/11/11/thoughts-on-tailwind-css/

(2) https://johanronsse.be/2020/07/08/why-youll-probably-regret-...

(3) https://johanronsse.be/2020/08/20/hey-your-api-surface-is-ca...

Don't fall for it! The marketing is sweet but the choice will hurt you in the end.

2 comments

You globally replace it by putting it in a component. And even if you use ‘@apply’ everywhere, you still get the benefit of design system consistency and faster styling.
You can easily just add a BEM tag for that specific component which has no function but allows you to easily find and replace. This is what I do with Tachyons and Tailwind. I like the ease of building with it, especially for a small startup - https://app.assembl.net and https://assembl.net are both Tailwind.

With the @apply directive, Tailwind components, and dead BEM classes for find and replace, tailwind is a joy - and so maintainable!