I wanted to like tailwind, but the html/tsx became so bloated and unreadable that I actually begun appreciating scss modules more. Separation of concerns and all that jazz.
People often tout "separation of concerns" but it really doesn't apply here.
The important concerns to separate are business/application concerns. Putting your JS in .js files, your CSS in .css files, and HTML in .html, it's separation of languages. You could argue that the three languages solve different problems but this isn't true. We have JS writing DOM nodes which HTML does intrinsically, we have CSS and JS doing animations, we have CSS that does styling but also CSS that does layout, HTML nodes that are sometimes there specifically for design or layout concerns. We should be focused on components here, which use the three technologies to solve one business/application problem.
Tailwind can get a little ugly, but you are supposed to use it in conjunction with components. Personally, I don't find 10 inline classes that much harder to read than 10 style rules on 10 lines.
I'm not the person you were replying to, but I kind of treat @apply as an anti pattern. It exists purely to satisfy some a "need" for "clean code".
After a week or two w/ Tailwind full-time, the verbose syntax fades into the background and it's a problem in practice. I've been through a few teams who came into it very skeptical but all conceded it wasn't a problem after becoming acclimated to the paradigm.
My uncompiled CSS file is usually less than 50 lines, with the bulk of that being some sort of one-off animation or gradient syntax that Tailwind can't do out of the box.
The important concerns to separate are business/application concerns. Putting your JS in .js files, your CSS in .css files, and HTML in .html, it's separation of languages. You could argue that the three languages solve different problems but this isn't true. We have JS writing DOM nodes which HTML does intrinsically, we have CSS and JS doing animations, we have CSS that does styling but also CSS that does layout, HTML nodes that are sometimes there specifically for design or layout concerns. We should be focused on components here, which use the three technologies to solve one business/application problem.
Tailwind can get a little ugly, but you are supposed to use it in conjunction with components. Personally, I don't find 10 inline classes that much harder to read than 10 style rules on 10 lines.
To each their own, of course!