Confession
I have to admit, I am absolutely late to the game with trying Tailwind to any extent.
I have resisted for the longest time giving it a shot due to a notion that it is not a replacement for knowing how to use CSS, understanding how it works fully, and using it in the way we have been told to use it, which is in a semantic way.
Let me Gemini that for you:
"The semantic approach trained us to fear utility classes as they were historically non-reusable and led to bloated stylesheets. We prioritized separation of concerns, ensuring our HTML was clean and our CSS described the purpose of an element (e.g.,.user-avatar), not its appearance. Tailwind forces a direct reckoning with this by asking us to embrace classes likew-10 h-10 rounded-full, effectively inlining the styles directly into the markup. This is where the core mental friction lies."
Conversion and Synthesis
Now, I can say I have an informed opinion, and it's more or less in-line with what leaders in CSS thought, like Chris Coyer, have said, which is that essentially, yes, "both sides are right".
I found using the utility classes to quickly scaffold what I wanted my site to look like easy - granted having to reference Tailwind's docs frequently.
Or, again, as Gemini put it:
"The ease of scaffolding is unparalleled. The mode shifts from 'What class name should I invent for this specific style?' to 'What specific styles do I need right now?' You achieve a near-instant feedback loop. However, the downside is evident: a button's markup can quickly look like class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded". This 'class soup' is the cost. My conclusion is that this cost is acceptable only when using a component-based architecture where that complex class string is defined once inside a component, keeping the consuming HTML clean."Verdict
I see Tailwind, and other utility class CSS libraries generally, as abstraction layers above what "real core knowledge" of CSS can get you, and, depending on what you are doing, can be useful, and enough.
Gemini extended, once more:
"Calling Tailwind an abstraction layer is key. It's not a replacement for knowing CSS fundamentals; it's a productivity enhancer for those who know CSS. When I need a responsive layout, I don't need to look up the exact syntax for a flex container; I just applyflex md:flex-row. The moment I encounter a bug, I must understand the underlying CSS rule thatflexorz-10is generating. Furthermore, the JIT (Just-In-Time) compiler ensures that only the classes I actually use end up in the production build, completely negating the historical concern of having thousands of unused utility classes shipped to the user."
Further Reading
Tailwind: https://tailwindcss.com/