Comment by znnajdla
1 day ago
I used plain CSS for more than a decade and felt the benefits of Tailwind within 10 minutes of getting started. What fueled the growth of Tailwind is that it makes web development palpably easier.
1 day ago
I used plain CSS for more than a decade and felt the benefits of Tailwind within 10 minutes of getting started. What fueled the growth of Tailwind is that it makes web development palpably easier.
What were the benefits that you felt instantly? I still don't feel anything and would prefer plain CSS over Tailwind any day.
I first took a css courses to get the basics then didn’t do much with it, then tailwind came out. I had used bootstrap, but always struggled to get stuff to look nice. I’m not doing web dev most of the time. So it was much easier to memorize tailwind utility classes than css. These days with ui frameworks like daisy, shadcn, tailwind is pretty easy for doing something simple for an IT dev tool but still customize it.
For creativity, I wished I had the time to get really good with css. It really seems to have grown a lot. Using sveltekit, its really easy to get component scoped css
It lets you apply styles to a single element without it messing up the whole rest of the page/site/app. i.e. it disabled the primary feature of CSS, the thing most people don't want from it.
I agree that the primary feature of CSS is what people don't want from it anymore. If you're building your app with components (web components, react, etc), those become the unit of reuse. You don't need CSS to offer an additional unit of reuse, it only complicates things at that point.
2 replies →
Why do people prefer it over CSS modules? They also solve the style containment problem, and do not require any effort to set up, or any additional library to learn?
8 replies →
I think that’s what people are talking about when they say they don’t see the benefit.
There’s already a style attribute on every html element that does exactly that, and works fine in components.
“There must be something more…?” But it turns out there’s not. Just shorthand class names to save you having to type padding-left:4px
1 reply →
Which means most people don’t understand the basics of what they’re working on.
How is that different than inline styles?
2 replies →
Honestly, for me, tailwind was just pleasant to work with and pure css definitely was not.
And I was super skeptical about it at first. I almost said no to it, but I trusted our main ui guy and wanted to allow him autonomy. And I ended up loving tailwind after working with it.
Do you remember what made it click for you? What was the hard part of writing plain CSS that tailwind made significantly easier?
CSS requires discipline, or you end up accidentally styling something completely unrelated because you were overly general, or overly specific, or accidentally reused a class name. CSS disallows local reasoning. If you’re writing markup for a component, you have to jump between two files.
There are plenty of other problems Tailwind solves, but these two alone make me never want to go back.
Ignoring that Tailwind requires that same discipline... Pay close attention how often you end up in a situation where a different color was used, or how dark theme tags have been missing, and so much more.
What if you need to copy a element with tailwind, this later gets altered to include a slightly different style, but wait, now you have a original somewhere else in your code base, that is missing those updates. So you require the discipline just like CSS to keep things up to date.
Tailwind is great if you use it sporadically ... but have you looked at the source code of so many websites that use tailwind? Often their entire html file is a horrible mess million miles long tags.
I am amazed how often people do not even realizes that CSS supports nested Selectors? With nested Selectors, you get the benefit of creating actual component level structures, that can be isolated and shareable. Yet almost nobody uses them. I noticed that most people lack a lot of CSS knowledge, and they find it hard because they never stepped beyond the basics. Nor do they keep up to date.
3 replies →
I agree with you about discipline; but... was it not interesting to discover how to build such a discipline? Was it not intriguing to learn how people who had been writing CSS for years had made it tolerable?
Besides, there recently have been several crucial improvements to CSS to address these pain points. One is CSS layers, which lets define custom layers of specificity that help with the discipline (e.g. resets or some baseline styles go in a low layer, component styles go in a higher layer, and finally overrides end up in the highest layer). The other is CSS scope, which prevents the leakage of the styles. These should greatly help with the specificity issues; and @layer is now sufficiently broadly supported that it is safe to use.
> If you’re writing markup for a component, you have to jump between two files.
Yeah; one of the reasons for my question about the groups in which tailwind saw the biggest growth was that in some ecosystems jumping between files was not a problem to begin with. Vue, for instance, had single-file components, where css could be written in the same file as javascript. So did svelte. So does astro.
3 replies →
This is why I loved polymer 1 and it's adoption of the shadow dom.