But is it not really annoying to redefine the entire style in the class list of every component? Like if you have multiple things that look almost identical you need about a dozen classes that are identical on each and if you ever want to change that you have to go through each of them and change it, rather than using css classes how they’re actually supposed to be used and changing it in a single place
That’s where the good system design part comes in.
If you have a dozen identical looking components, they should have been one component imported into a dozen places. Keep it DRY.
If you’re more concerned about stuff like common borders or background colors being applied everywhere, you can always use the “@apply” directive to create a new reusable class.
Tailwind makes creating and iterating through design concepts so much faster and easier if your system is designed well.
I agree that it’s useful if you’re trying to create something quick and small but as soon as you want to do anything where there’s complexity that needs to be kept consistent then it falls apart for me. Surely tailwind is the exact opposite of DRY with the way you specify properties directly on the component instead of in a normal css system?
Tailwind isn’t any more or less DRY than normal CSS.
First off, it’s rare to use CSS in the intended way these days - scoped styling has become very popular for good reasons, which means component styles are either already separated, or you’re importing things. This doesn’t change with Tailwind, you can still import things just the same.
But where it shines is removing the need for arbitrary class names. Almost every CSS codebase I’ve seen used class names differently, sometimes even for the same thing. How often have you seen .container overloaded with different meanings? Instead of having to come up with individual class names that might or might not actually be descriptive, I connect the styles to the elements that use them. No more jumping around between CSS and JS, no more arbitrary names - classes have well-defined name structures that you learn once, and use for every project after that.
I’ll use Svelte as an example. In Svelte, you can just put a style tag at the bottom of your component, and everything you put in there is automatically scoped to it. I’m not hunting through dozens a CSS files trying to find where a class was overridden and adding !important everywhere. Using vanilla CSS allows me to keep my markup clean and concise so I can better see the actual structure of each component without dozens of CSS class names cluttering everything up.
Sure, you can write your own class in Tailwind using the @apply directive, but why not just add a global CSS class? That’s essentially what you’re doing anyways. And now you don’t have to hunt through multiple layers of abstraction to figure out what styles are actually being applied.
In my experience, Tailwind was good as long as I didn’t try to do anything too interesting. What ended up happening in my project was that I would use Tailwind classes for basic styling, then break into vanilla CSS whenever Tailwind wasn’t sufficient. And that meant I was looking in multiple places to see what styling was affecting my component… which kinda defeated the purpose of using Tailwind.
Personally, I also just found Tailwind harder to read. I prefer to read code vertically rather than horizontally.
It does remove a small aspect of its usefulness, but the other ones I’ve mentioned still exist.
I’ll use Svelte as an example. In Svelte, you can just put a style tag at the bottom of your component, and everything you put in there is automatically scoped to it. I’m not hunting through dozens a CSS files trying to find where a class was overridden and adding !important everywhere. Using vanilla CSS allows me to keep my markup clean and concise so I can better see the actual structure of each component without dozens of CSS class names cluttering everything up.
Several points:
You still have to hunt through the file to find any selectors applying to your elements. There’s still a bunch of vertical jumping around.
How often do you actually need to see the structure of your DOM without styles? I want to see it with styles much more often than without.
You still have to come up with unique class names for everything in your DOM, or you’ll have brittle selectors. This means that for every single component in every single project I have to learn the class names, and they might even change over time. This is a lot of overhead.
In my experience, Tailwind was good as long as I didn’t try to do anything too interesting. What ended up happening in my project was that I would use Tailwind classes for basic styling, then break into vanilla CSS whenever Tailwind wasn’t sufficient. And that meant I was looking in multiple places to see what styling was affecting my component… which kinda defeated the purpose of using Tailwind.
You almost always have to look in multiple places with normal CSS styling, since it’s cascading. If I can solve 95+% of my apps styling needs inline and just break out for special cases, I still remove most of the jumping around and class name overhead and so on. This is still a massive advantage.
I guess it comes down to preference. I personally don’t mind scrolling down a little bit to see my styles if it means the structure of the component is cleaner. I’ve found that I can iterate faster that way. If things get too unwieldy, that usually indicates to me that I should extract something out into a separate component.
About point 3. At least in svelte, you don’t have to worry about having unique class names. The styles are scoped to the component. Meaning that the CSS you write in one component doesn’t affect any other components (unless you explicitly want it to). So you can reuse class names on multiple components and they won’t interfere with each other. for small components, I’ll often not even use class names if I can get away with it. I’ll just use element selectors.
You can also get this functionality with React and Vue using CSS modules.
I can see why one would prefer Tailwind over traditional CSS though. Especially if you’re writing straight HTML/CSS, or if your chosen framework doesn’t support scoping styles to your component.
I guess it comes down to preference. I personally don’t mind scrolling down a little bit to see my styles if it means the structure of the component is cleaner. I’ve found that I can iterate faster that way. If things get too unwieldy, that usually indicates to me that I should extract something out into a separate component.
It definitely is, everyone should develop the way they are most comfortable. That’s Tailwind for a lot of people, but it will never be everone.
About point 3. At least in svelte, you don’t have to worry about having unique class names. The styles are scoped to the component. Meaning that the CSS you write in one component doesn’t affect any other components (unless you explicitly want it to). So you can reuse class names on multiple components and they won’t interfere with each other. for small components, I’ll often not even use class names if I can get away with it. I’ll just use element selectors.
I was talking about having to find unique class names inside a scoped context. Even from that perspective, my complaint is nevertheless completely valid - it’s still a lot of overhead and has been my biggest painpoint when maintaining a lot of applications in the past.
It’s bad if you don’t have a design system. If you have a design system it’s :chef’s kiss:
But is it not really annoying to redefine the entire style in the class list of every component? Like if you have multiple things that look almost identical you need about a dozen classes that are identical on each and if you ever want to change that you have to go through each of them and change it, rather than using css classes how they’re actually supposed to be used and changing it in a single place
That’s where the good system design part comes in.
If you have a dozen identical looking components, they should have been one component imported into a dozen places. Keep it DRY.
If you’re more concerned about stuff like common borders or background colors being applied everywhere, you can always use the “@apply” directive to create a new reusable class.
Tailwind makes creating and iterating through design concepts so much faster and easier if your system is designed well.
I agree that it’s useful if you’re trying to create something quick and small but as soon as you want to do anything where there’s complexity that needs to be kept consistent then it falls apart for me. Surely tailwind is the exact opposite of DRY with the way you specify properties directly on the component instead of in a normal css system?
Tailwind isn’t any more or less DRY than normal CSS.
First off, it’s rare to use CSS in the intended way these days - scoped styling has become very popular for good reasons, which means component styles are either already separated, or you’re importing things. This doesn’t change with Tailwind, you can still import things just the same.
But where it shines is removing the need for arbitrary class names. Almost every CSS codebase I’ve seen used class names differently, sometimes even for the same thing. How often have you seen
.containeroverloaded with different meanings? Instead of having to come up with individual class names that might or might not actually be descriptive, I connect the styles to the elements that use them. No more jumping around between CSS and JS, no more arbitrary names - classes have well-defined name structures that you learn once, and use for every project after that.IMO, scoped styling removes Tailwind’s usefulness.
I’ll use Svelte as an example. In Svelte, you can just put a style tag at the bottom of your component, and everything you put in there is automatically scoped to it. I’m not hunting through dozens a CSS files trying to find where a class was overridden and adding !important everywhere. Using vanilla CSS allows me to keep my markup clean and concise so I can better see the actual structure of each component without dozens of CSS class names cluttering everything up.
Sure, you can write your own class in Tailwind using the @apply directive, but why not just add a global CSS class? That’s essentially what you’re doing anyways. And now you don’t have to hunt through multiple layers of abstraction to figure out what styles are actually being applied.
In my experience, Tailwind was good as long as I didn’t try to do anything too interesting. What ended up happening in my project was that I would use Tailwind classes for basic styling, then break into vanilla CSS whenever Tailwind wasn’t sufficient. And that meant I was looking in multiple places to see what styling was affecting my component… which kinda defeated the purpose of using Tailwind.
Personally, I also just found Tailwind harder to read. I prefer to read code vertically rather than horizontally.
It does remove a small aspect of its usefulness, but the other ones I’ve mentioned still exist.
Several points:
You almost always have to look in multiple places with normal CSS styling, since it’s cascading. If I can solve 95+% of my apps styling needs inline and just break out for special cases, I still remove most of the jumping around and class name overhead and so on. This is still a massive advantage.
I guess it comes down to preference. I personally don’t mind scrolling down a little bit to see my styles if it means the structure of the component is cleaner. I’ve found that I can iterate faster that way. If things get too unwieldy, that usually indicates to me that I should extract something out into a separate component.
About point 3. At least in svelte, you don’t have to worry about having unique class names. The styles are scoped to the component. Meaning that the CSS you write in one component doesn’t affect any other components (unless you explicitly want it to). So you can reuse class names on multiple components and they won’t interfere with each other. for small components, I’ll often not even use class names if I can get away with it. I’ll just use element selectors.
You can also get this functionality with React and Vue using CSS modules.
I can see why one would prefer Tailwind over traditional CSS though. Especially if you’re writing straight HTML/CSS, or if your chosen framework doesn’t support scoping styles to your component.
It definitely is, everyone should develop the way they are most comfortable. That’s Tailwind for a lot of people, but it will never be everone.
I was talking about having to find unique class names inside a scoped context. Even from that perspective, my complaint is nevertheless completely valid - it’s still a lot of overhead and has been my biggest painpoint when maintaining a lot of applications in the past.