[stevebmark]

CSS modules solves all of these problems (except the separate file), and also lets you write vanilla CSS, and not have to hack around the limitations of css-in-js. Dynamic styles are easy with React's `css` prop, or simply passing in an additional class name.

[mikewhy]

React doesn't have a CSS prop.

[frank_nitti]

Must be referring to the style prop for jsx elements whose argument conforms to the React.CSSProperties interface

[mikewhy]

Hard to say, for instance the very popular styled-components package does add a `css` prop magically to all elements.

[girvo]

I think they've assumed `styled-components` is default?

[hudixt]

Added one more point on API. Also, you'll probably end up using one more library called classname for better classname management.

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

In the end, I generally prefer to use tailwind + emotion. My goals usually is to save time and make system more consistent rather than perf gains, which isn't that much on new systems.

[nicoburns]

Indeed. Worth noting that classnames is a tiny library.

[lhnz]

I've heard that `clsx` is faster: https://github.com/lukeed/clsx

[nicoburns]

Looks like a well designed library (and it is only 40 lines long - but then the original isn't much bigger). But it's hard for me to imagine code where this is a bottleneck.