I think you’re spot on - development is a big tent and it’s totally cool for this to be personal preference.
In a million-line codebase, you can add and remove classes from a specific element with 100% confidence that you are not breaking anything else. With class-based styles, even when using theme variables, there is always the chance you end up breaking something at a distance by adding a property to an existing class, changing a shared value, renaming a selector or changing it's precedence.
If you find yourself in this environment where dozens of people are making changes concurrently, and these issues are a daily occurrence, naturally you'll wonder how you ever worked with CSS any other way.
styled-jsx and other approaches can get you similar benefits but extra care is necessary. I mostly avoid Tailwind due to the lock-in, complex setup and slow build, otherwise might have used it for quick prototypes more often.
Isn't the flip side of this that it makes it almost impossible to keep styles (visually) consistent across the codebase?
.button {
@apply py-2 px-4;
}
.button {
padding: var(--medium-padding) var(--medium-padding);
}
The point of Tailwind is that it’s a straightforward way to handle all the CSS complexity and put the moving parts into a single config file that works the same everywhere.
Tailwind: https://tailwindcss.com/docs/theme#spacing
Would it be strange to define p-2 to be smaller than p-1? Yes. Exactly as strange as defining your padding-medium variable to be smaller than padding-small.
However, the Tailwind team are very close to releasing something that is, apparently, going to dramatically speed up build times (source: Adam Wathan's recent tweets).
I sometimes wonder if people even understand what technology they are using:
CSS = Cascading Style Sheets
Go read some history, as to why exactly they were created. What you are describing is not CSS at all, that's properties on a design grid.
Which goes back to the author's point - if you want or really need that, don't use CSS. Just use components with standalone properties.
Use CSS when you want to be 100% sure it will change everything else.