Tailwind is a thin wrapper for the people scared of CSS. I use Tailwind at work, and it opened my mind to the benefits of an "ugly" html layout with inline styling. However, being there now, I think that inline CSS offers the better "Tailwind experience" - CSS requires no setup, and learning it properly is a good investment for the future when Tailwind, like so many other frameworks, will inevitably end up on the frontend dumpster fire.
Inline CSS has a few HUGE drawbacks compared to Tailwind, but I think the biggest by far is that your devs are totally unconstrained in what they can do for styling. You're forced to rely solely on convention to not, for example, violate your color palette, or use the wrong border radius, or the wrong padding value. For a small app with a small team and no concrete design system that's not a big deal. At scale that is absolutely massive.
A few of the other advantages of Tailwind:
- reduced noise in the markup compared to raw inline styles, with the underlying styles getting cached by the browser
- utility classes can contain multiple properties that should always go together
- media queries!
You should learn what CSS is actually doing as well, but realistically Tailwind is, like you said, a pretty thin wrapper on CSS. Learning Tailwind usually just means learning CSS, with some different property names.
I was about to say, if anything it shows there is demand for the style tag to handle pseudo selectors. Setting up some CSS variables on the root and accessing them through the style tags would provide most of the benefit of Tailwind.
Good point, I don't know of any way of doing that inline. So that's definitely a good convenience function in Tailwind!
My lived approach to inline vs. not-inline is: why not both? Inline is great for prototyping, and for edge cases, like specific margins for wrapper divs. Where CSS classes really shine is when it comes to mature / often used components.
