A lot of the advice you give here is good; but there's also a lot here that doesn't feel specific to Tailwind. Component-based frameworks scope CSS to components; so it's definitely good practice to break an application down into "small re-usable pieces" and this already solves some problems in terms of HTML code and design consistency etc. without the need for BEM.
But the component-based approach comes with its own set of problems; specifically related to theming and unified design. I think developers got hung up on the idea that a component should be some isolated element that can be taken out of project A and re-used in project B and work and look exactly the same. So they wrote component styles to handle all aspects of the component's styling in isolation; but that makes maintenance and future global changes very difficult. It also tends to introduce a lot of duplication. But, unless you're specifically building a UI library, isolated styling is rarely a concern; and so introducing global styles is not an issue...
And from my perspective that's all Tailwind is: a global set of utility styles with some handy configuration built in. The same result can be achieved with any well maintained global stylesheet. Issues around theming and consistency in component styles can also be solved with pre-processors (e.g. SCSS variables; mixins etc.) or to some extent CSS variables. I'm not saying don't use Tailwind; but I've seen too many articles that claim it's a magic bullet to styling; when really it's just a well-packaged tool that addresses an already solved problem.
Can't disagree with you there, I agree that this approach has its own problems. Hopefully these can be solved over time.
You could apply this article to any component based style; I talked about Tailwind specifically, first because I see it get a lot of hate that it doesn't really deserve, and second because that's what I've got experience with. I've used it on several projects which had really fast turnarounds and I wouldn't have been able to get those over the line if I was writing custom classes, even if those classes were isolated. That's the reason I use Tailwind over other solutions, it's really fast and easy to use and it follows a design system instead of random amounts of space. But I won't deny you could get a more custom look with a different method.
It's also not the best to use if you think your theming will change, though there's plenty of ways to mitigate that. I prefer it for headless applications over traditional websites. All about choosing the right tool for the job!
Your perspective seems to be focused on a subset of type of businesses/organisations. e.g We're an agency - no 2 websites are designed the same. A website will get built, launched, general maintenance, until 5-10 years down the line the client wants a brand new website anyway. So having any requirement to "theming" or global changes - has never happened for us and a client in 10 years. So don't worry until it happens!
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
A lot of the advice you give here is good; but there's also a lot here that doesn't feel specific to Tailwind. Component-based frameworks scope CSS to components; so it's definitely good practice to break an application down into "small re-usable pieces" and this already solves some problems in terms of HTML code and design consistency etc. without the need for BEM.
But the component-based approach comes with its own set of problems; specifically related to theming and unified design. I think developers got hung up on the idea that a component should be some isolated element that can be taken out of project A and re-used in project B and work and look exactly the same. So they wrote component styles to handle all aspects of the component's styling in isolation; but that makes maintenance and future global changes very difficult. It also tends to introduce a lot of duplication. But, unless you're specifically building a UI library, isolated styling is rarely a concern; and so introducing global styles is not an issue...
And from my perspective that's all Tailwind is: a global set of utility styles with some handy configuration built in. The same result can be achieved with any well maintained global stylesheet. Issues around theming and consistency in component styles can also be solved with pre-processors (e.g. SCSS variables; mixins etc.) or to some extent CSS variables. I'm not saying don't use Tailwind; but I've seen too many articles that claim it's a magic bullet to styling; when really it's just a well-packaged tool that addresses an already solved problem.
Can't disagree with you there, I agree that this approach has its own problems. Hopefully these can be solved over time.
You could apply this article to any component based style; I talked about Tailwind specifically, first because I see it get a lot of hate that it doesn't really deserve, and second because that's what I've got experience with. I've used it on several projects which had really fast turnarounds and I wouldn't have been able to get those over the line if I was writing custom classes, even if those classes were isolated. That's the reason I use Tailwind over other solutions, it's really fast and easy to use and it follows a design system instead of random amounts of space. But I won't deny you could get a more custom look with a different method.
It's also not the best to use if you think your theming will change, though there's plenty of ways to mitigate that. I prefer it for headless applications over traditional websites. All about choosing the right tool for the job!
Your perspective seems to be focused on a subset of type of businesses/organisations. e.g We're an agency - no 2 websites are designed the same. A website will get built, launched, general maintenance, until 5-10 years down the line the client wants a brand new website anyway. So having any requirement to "theming" or global changes - has never happened for us and a client in 10 years. So don't worry until it happens!