Not my experience for the record. I use Tailwind in my side project, and it is exactly as convenient as it sounds to write my styles directly into HTML rather than think of a class name, add it in HTML, switch to the proper CSS file (or create it if it doesn't exist and make sure it's part of the build step), forget what name I had decided on, check the original HTML to remember the name, then go back to the CSS file and write the class name and then finally within that block add my style.
I think you’re talking about just serving a .html file for every page in a site right? Having all of your styles duplicated everywhere would be much more confusing than writing CSS (and having to invent one name per groups of common things.)
IMO it’s only viable if you can create your own components. Which you will also have to give a name.
It's implicitly expected you're already doing so, such as web components or whatever your selected framework uses to abstract components.
> Having all of your styles duplicated everywhere
Locality is a feature. It's much easier to jump into any random bit of HTML and understand what's going on and confidently make changes without having to pull up multiple other files to grok the classes involved.
Compression is going to solve most of the issues with repeating classes everywhere, and while not recommend you can still use something like Sass/SCSS and Tailwind directives like @apply to separate classes into their own files.
.my-class {
@apply p2 mr-4 mb-2;
}We can agree to disagree about readability though, I have a lot of trouble groking long class=“…” strings.
Copy/pasting, which Tailwind is so proud of, is to fork, and never merge. Let's fork all the things. We end up with a bazillion little things and no coherence/alignment between them. Hello, second law of thermodynamics.
Quick detour: our universe is so organized, that inanimate matters forks, and animate matters looks at the forks and is trying to find ways to solve these pieces together into coherent systems by merging putting together, deduplicating, generalizing. Inanimate and animate are two opposing forces, increasing entropy requires no intelligence, decreasing it does. It's no surprise Tailwind promotes lack of intelligence by saying "copy paste bro, it's good, turns out". Because that's who they target. People afraid of thinking. "Oh no you gonna like have to name a class, that's terrible". Woah woah... rocket engineering territory here!
For those starting to get back to their senses... they added @apply. But @apply is by Tailwind's own admission "like using CSS". I'd add it's like using CSS but with 1/1000 the capability, unclear/surprising precedence, and tons of extra steps/indirection, because... you could've been using CSS, simply.
And one more word about "compression". Do you know what you're doing when you name a reusable case and put it behind a class, function, package, module, library? You're compressing. So yes compression does solve issue of repetition, but intelligent compression (YOUR BRAIN) does this in a much better way aligned to your project's needs, compared to, say, GZip. GZip can't think for you. It can shrink things for transmission, but its only job is to shrink transmission. Your project still needs to evolve in time, and when you look at it... you're looking at the repetition, not at the GZip.
Or maybe I'm wrong, do you edit the .gz directly? Heheh. If so, I take all I said back.
But compression, in the context of broader space (your project, your industry, your target audience, coworkers, customers) and broader time (project evolution, change management, new requirements adaptation, changing platforms) is your job. The job of intelligence. The moment a computer compresses better than you, is the moment you become useless. LLM is a form of compression, because compression relies on prediction of what's next, whether it be what we desire is next (needs, desires, goals) or what is next regardless (outcomes, events, probabilities). When I tell an LLM "code me a modern site" and it does better than you (i.e. not using Tailwind, but with proper minimal CSS with well named classes), compression replaced you.
^_O
> forget what name I had decided on
I think that's not the problem with CSS, but with how you approach design. If you treat your design process as editing a document, and just want to "Ctrl+B" to bold necessary parts, yes, I'm sure Tailwind's better. But, I can see how it could be a problem with maintenance and collaboration as there isn't an agreed upon design language or a document structure.
I understand that managing multiple files and going back and forth can be considered an overhead, but that's a componentization problem, not a problem with CSS per se, and you expect to recuperate your losses with the time you gained when finding and fixing bugs. Otherwise, there's no point in componentization. You'd have the same tradeoff when writing JavaScript code, for example.
You'd encounter the same set of problems the moment you start refactoring your styles into Tailwind components.
1. Most of us are using landscape displays. I can have my functionality on the left and my CSS on the right. If the style information is interspersed with the functionality at component level in the same file, I can’t do that and I can only see half the information at once.
2. It fits my working pattern. Usually when I’m editing styles I’m flying between the styles of many different components. If the style code was interspersed with the functionality this would be a lot slower - with stylesheets I just have to scroll.