Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Don't use Tailwind for a design system (2021)

sancho.dev

Post reply on HN
Print view View original

11–20 of 164 posts

Re: Don't use Tailwind for a design system (2021)

#11

Post by danielvaughn »

stefanfisk wrote: post #7
dimitrisnl wrote: post #3

I've been using Tailwind for my component library and I don't agree. For example "It is optimised for writing, but not for reading" is certainly a problem, but this is why I created a component library. To abstract this. Also this is weird: ``` const Card = (props) => { const className = "p-" + props.gap.toString(); return ; }; ``` Why do this? If gap needs to be set, then break apart the Card subcomponents (Card.Tit…

Concatenating Tailwind classes is a huge code smell. While you can safe list them, I've personally never done anything where I felt that it was worth the effort compared to just listing all possible classes.

I like to use a library called classnames. It lets you define dynamically-applied classes in a much more readable way.

https://www.npmjs.com/package/classnames

Re: Don't use Tailwind for a design system (2021)

#12

Post by satvikpendem »

b93rn wrote: post #10
satvikpendem wrote: post #5

I've used Tailwind extensively at previous companies and inevitably each one creates an abstraction that's akin to: const headerClasses = [(list of Tailwind classes here)]; ... because the complexity of reading and writing all of the classes is just too much. At that point, you've just reinvented CSS classes. Tailwind fans will tell you to not do this but if multiple companies are independently having the same proble…

[flagged]

No, I haven't. As I said I've worked in several companies that explicitly have this sort of abstraction. If so, what's the point of using Tailwind? Tailwind fans will say it's atomic classes, but when using them with many devs, it indeed turns into reinventing CSS classes.

So, perhaps it's the other way around, that Tailwind is simply not a good tool at scale.

Re: Don't use Tailwind for a design system (2021)

#13

Post by meet_zaveri »

Started my web dev in bootstrap era. When I found out about tailwind and tried it in one of my side project, I never looked back.

In one of my prev companies, I was able convince my engineering manager to use tailwind alongside Antd and it worked flawlessly.

Just to make a point here, Antd is an example of design system and I used tailwind as a "utility" from which I can use vast amount of classes without writing seperate custom css for each of my components.

Re: Don't use Tailwind for a design system (2021)

#16

Post by jamager »

danielvaughn wrote: post #6

The author makes a couple of valid points, although these aren’t reasons to not use Tailwind. Rather, they’re just the trade-offs you have to sacrifice for the benefits that Tailwind provides. Whether the trade-offs are worth it depend on your use case and your professional opinion. That being said, when looking at Tailwinds problems, you have to ask yourself “compared to what?” Especially that first complaint - Tail…

Agreed. For me an increasingly important factor is documentation. Good documentation can save so MUCH time and headaches, and tailwind's is so good that I have an easier time accepting its defects and trade-offs on that basis alone.

Re: Don't use Tailwind for a design system (2021)

#17

Post by HuwFulcher »

I don't use React or do much front-end work so I might be missing something here but what's the problem? Tailwind is a utility-first framework. If you're having to add so many classes inline that it makes things more difficult you can surely abstract it away within CSS files?

I thought the main thrust of Tailwind is that you get a sensible set of utility classes so you can mix and match them how you need? For more complicated design systems can't you combine these utility classes into your own classes in a CSS file? You still retain the advantage of easier to read CSS and easier to read JSX.

Re: Don't use Tailwind for a design system (2021)

#18

Post by danielvaughn »

jamager wrote: post #16
danielvaughn wrote: post #6

The author makes a couple of valid points, although these aren’t reasons to not use Tailwind. Rather, they’re just the trade-offs you have to sacrifice for the benefits that Tailwind provides. Whether the trade-offs are worth it depend on your use case and your professional opinion. That being said, when looking at Tailwinds problems, you have to ask yourself “compared to what?” Especially that first complaint - Tail…

Agreed. For me an increasingly important factor is documentation. Good documentation can save so MUCH time and headaches, and tailwind's is so good that I have an easier time accepting its defects and trade-offs on that basis alone.

The tooling around Tailwind is so good. The VSCode intellisense plugin auto-suggests tailwind classes for me, which means I don’t even need to reference the docs unless I’m looking for obscure functionality. It’s amazing.
Post reply on HN