Hacker News Reader

Comment by dimitrisnl | Hacker News Reader

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 <div className={className} />; }; ```

Why do this? If gap needs to be set, then break apart the Card subcomponents (Card.Title, Card.Description, Card.Footer) and let the consumer handle their odd logic that break the design system guidelines.

I have faced issues with Tailwind too, but I would pick this 10 out of 10 times over styled-components and such.

View on HN

FWIW this code would also break with newer versions of Tailwind as it tries to generate a Tailwind class name on the fly. Tailwind needs all class names to be statically analyzable (via very dumb pattern matching) to pare down the infinite list of possible class names to something you can actually write to a CSS file for production.

On a related note, the article's example of why Tailwind is clumsier for a Box component misses out on the addition of the `space-y-{number}` and `space-x-{number}` class names, which are equivalent to the "gap" props in its React example. But I think those didn't exist in March 2021 so I don't blame the author.

You can provide a whitelist of classes you use dynamically in the config file.

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

Another (smaller) alternative is clsx: https://www.npmjs.com/package/clsx

Another (even smaller) alternative is `.join`

`const classes = [some, classNames, here, foo ? 'foo' : ''].join(' ');`

A good middle ground is to have your linter sort the classnames in a reasonable way. I prefer the “outside in” method. This keeps things readable enough so you can find classes where you expect them.

I would like some kind of editor plugin that would collapse all classNames by default. That would help a lot with Tailwind readability.

Reply on news.ycombinator.com