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.
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.
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.
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.
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.
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.