Not sure if you meant it to be, but "my unique, non conflicting class name (usually incredibly arbitrary to avoid conflicts)" is kind of a straw man; there are multiple ways to prevent that problem, such as CSS modules or web components.
Anyway, here's one common scenario for me: I need the same set of styles on multiple elements. With Tailwind, it goes one of a few ways:
- I duplicate the styles on all of the elements
- I abstract the data into some sort of loop and add the styles to the single element in the loop body
- I create a component, add the styles to that component and use that in place of each element
All of the above gets harder if there are existing elements that share some of the same styles, because I now need to identify the subset of styles that must be extracted. It's even worse if it happens across different tag names, because I then need to introduce branching into my abstraction.
Meanwhile, with CSS, I just give each element the same class name and add those styles to that class name.
I think this is what the author is getting at by saying Tailwind is far to the "write-only" side of the spectrum. There's no argument from me that just writing `m-2` is faster than adding a class name to the element, going to my CSS file and writing `.classname { margin: 0.5rem; }`. But that's only the first part of the process.
Anyway, here's one common scenario for me: I need the same set of styles on multiple elements. With Tailwind, it goes one of a few ways:
- I duplicate the styles on all of the elements
- I abstract the data into some sort of loop and add the styles to the single element in the loop body
- I create a component, add the styles to that component and use that in place of each element
All of the above gets harder if there are existing elements that share some of the same styles, because I now need to identify the subset of styles that must be extracted. It's even worse if it happens across different tag names, because I then need to introduce branching into my abstraction.
Meanwhile, with CSS, I just give each element the same class name and add those styles to that class name.
I think this is what the author is getting at by saying Tailwind is far to the "write-only" side of the spectrum. There's no argument from me that just writing `m-2` is faster than adding a class name to the element, going to my CSS file and writing `.classname { margin: 0.5rem; }`. But that's only the first part of the process.