So I'll be blunt, and I hope none of the Tailwind & Co. fans get too offended by this.
Tailwind is an excuse for bad developers to not learn their job. An overwhelming majority of people who hype up tailwind have just convinced themselves that there is any actual merit to the technology, when in reality that's just their own bias and laziness.
There's very few people that actually know CSS well and still advocate for technologies like tailwind; the rest are just beginners that prefer to buy into the lie that putting all the styling directly in the HTML is somehow better to get around having to learn another language (one that isn't even hard to learn).
The truth is: Extracting the styling from the HTML is, for many reasons, the better way of doing it.
Using a system like SASS with utility placeholders would compile into much smaller CSS and would provide a similar experience to beginners while leaving the HTML classnames more meaningful.
Tailwind reminds me of the pre-css world where all styling was done with HTML attributes repeated again and again in a nearly illegible mess of markup.
I see arguments constantly for putting styling logic and markup all in the same file with styled components and the like and I'm left to think of the adage about those who don't study history. There is a lot of hubris and ego out there that builds first before understanding how we got to the percieved problem to begin with.
Tailwind is a lot like Sass already, its utility classes with some helpers, however unlike Sass you don't have to write out everything.
And thanks to PostCSS you don't have to write that classes in the HTML you can make your own class and use the @apply line so your css file not got a ton of repeating code you can do far more on one line with Tailwind them you do with Sass.
You also not have to duplicate your selectors in your media queries blocks and many extra stuff like that you will be able to just handle more easy...
With smaller css files you can make changes faster and still got your pretty meaningful classes...
Also thanks to the JIT in the new version it's much faster then SASS overall or at least on my PC.
There is far more to Tailwind than you know, you may want to look into it before you type things like this... :D
My comment just say how to fix all his issues with Tailwind?
First of all Bootstrap and TailwindCSS are every different like Tailwind don't come with it's own components... and the classes will not really change all that much over the years because they base on the CSS it self.
Using a system like SASS with utility placeholders would compile into much smaller CSS
This is false thanks to TailWindsCSS JIT the files you export just got the css you need noting more, noting less... I would say it would be the same size or smaller... smaller if you disable the basic reset. This is not an issue anymore for some time now!
HTML classnames more meaningful.
Almost my complete comment is about not having to put any TailWindCSS classes in the html and that you can use it really easy in css it self with the @apply
Tailwind reminds me of the pre-css world where all styling was done with HTML attributes repeated again and again in a nearly illegible mess of markup.
One again this doesn't even come close to the pre-css world like style tags could not do responsive breakpoints, and Tailwind got a ton of this helpers.
I see arguments constantly for putting styling logic and markup all in the same file with styled components and the like and I'm left to think of the adage about those who don't study history. There is a lot of hubris and ego out there that builds first before understanding how we got to the percieved problem to begin with.
I totally agree that styled components and all that other react css, and css in Javascript are just one huge mess! But this got noting to do with Tailwind...
What I'm describing above is basically a subset of bourbon (thoughtbot.com/blog/introducing-bo...) which predated tailwind. I could use that if I wanted something pre-written.
Wiring up post-css to allow you to to use tailwind is fine. I don't see much difference in writing a property definition in css/scss and writing the same as a shorthand css utility class referencing a library. In the end you should make your decisions based on the cost of supporting dependency management and specialized configuration to do what would come out of the box if you just wrote the rules in the codebase you control yourself.
Keep in mind that you build a site once, but it may get new features multiple times per year and with security updates, breaking changes may need to be adopted along the way. The more hands that touch an application the more training or detective work (if it was developed on contract) the team will have to do. This amounts to cost too. The closer you stick to core technologies the faster you can hire and onboard new team members and the easier it is to find and solve problems. I just don't see Tailwind as necessary enough to justify these costs.
We're all going to regret how complicated our build systems have gotten in the next 5 years. I just keep hoping that the law of diminishing returns will stop us from continuing to layer complications just to get a small gain that is outweighed or negated by what is required to support it.
I wouldn't say it's laziness in my case, but more about a lack of time or wanting to spend more time on the backend. If I am working on the front end only, then I would have the liberty of setting up sass and thinking up clever class names. But that's rarely the case.
I disagree how I see it y are essentially going to make another worse version of tailwind when you need to make your own styles in css for every project
I think you're wrong. Tailwind SS is not an excuse for being bad at CSS but in some cases it can speed up your development. When you need to be productive and keep a maintenable codebase TailwindCSS can be very useful. Make your own stylesheets can take sometimes (precedence, media queries, base styles, theming, ...) where Tailwind comes with all you need and you can start your development.
And I never claimed that. I didn't really pay much attention to this in my comment but of course there's legitimate use-cases for Tailwind. My point was that an overwhelming majority of its users see it as a way of putting styling information in their HTML without having to bother learning CSS (other than its properties, which is not where the complexity comes from).
Whether tailwind should be used in general is a completely different discussion (which, I think, comes down to both preferences in code organisation and preferences about different progression curves), but that's not what I was talking about in my original comment.
Nope you need to know CSS and you can learn it by breaking Tailwinds classes. If you are to meet deadlines and do things fast with both frontend and backend Tailwind. Everything has a purpose just cause you know css well doesnt mean everyone using Tailwind is bad at CSS :p
That is not what I said. Maybe I could have made it clearer, but my point is not that there aren't people who know what they're doing and, for whatever reason, choose to use Tailwind instead of vanilla CSS. I don't agree with them, but I respect that they simply have different priorities and know what they're doing.
My point is that most of the people using and defending Tailwind do so because they don't want to learn CSS.
They cant get away without learning css and actually thats more like Bootstrap. You can even see the Tailwind classes and improve in css. Anyways for rapid prototyping its the most effective
The abundance of frameworks covered up how the web pages are actually working. Tailwind or not, styles are still applied to a tree or elements and renders are still the most expensive part of it all. Now to paint all the DOM elements with classes it needs to walk through the whole tree, unlike style tag declaration or limited selectors.
But then again, our machines are quite powerful nowadays, so we wouldn't notice any difference anyway so we use whatever is convenient.
And it's all fine as long as new developers also get to at least have an idea of how a browser makes up an interactive page out of text files.
Laziness is the mother of invention, beginners will screw up anything you give them, frameworks and libraries are not an excuse for bad developers to not learn their job.
Interesting to know what's the reason to blame a tech which you don't understand? I don't understand why many folks like to use styled components, IMO it's much more productive and easier to support styling with TW or with css modules. But I don't blame people or the tech itself since it's me who don't understand the benefits. And I even assume that there are benefits in styled components, just not for my use cases.
This post is doing a good job to explain that Tailwind is not a replacement, it's a framework to make it quick and easier, and not to skip learning of CSS.
Like everything, it honestly depends on what you’re using it for. I write CSS or SASS for web components and Angular, but I mostly use either Tailwind or styled-components for for React. CSS gives you really granular control, but tailwind gets you 80% of the way there without interrupting your workflow by having to navigate to your stylesheet and fiddle with your custom selector.
If I’m building a UI library or a website for a design forward company it’s CSS or SASS, but if I’m just cranking out a a corporate web app, I’m not going to bother. As long as it looks clean, I can focus on features and bugs.
I think you did not work with large projects and big economic interests. The bundling and chunked css can be reduced to a minimum with defined css helper classes. The real world shows there is a gap between good designed components with modular css and none repeating css definitions and product owners who forces time to market. Another big issue are typescript definitions for css modules and the time it needs to be bundled in build processes that don't exists with inline css classes.
One point I can go with is to know css. You can't use correct css helper classes if you don't understand css in general.
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.
So I'll be blunt, and I hope none of the Tailwind & Co. fans get too offended by this.
Tailwind is an excuse for bad developers to not learn their job. An overwhelming majority of people who hype up tailwind have just convinced themselves that there is any actual merit to the technology, when in reality that's just their own bias and laziness.
There's very few people that actually know CSS well and still advocate for technologies like tailwind; the rest are just beginners that prefer to buy into the lie that putting all the styling directly in the HTML is somehow better to get around having to learn another language (one that isn't even hard to learn).
The truth is: Extracting the styling from the HTML is, for many reasons, the better way of doing it.
Couldn't agree more.
Using a system like SASS with utility placeholders would compile into much smaller CSS and would provide a similar experience to beginners while leaving the HTML classnames more meaningful.
Tailwind reminds me of the pre-css world where all styling was done with HTML attributes repeated again and again in a nearly illegible mess of markup.
I see arguments constantly for putting styling logic and markup all in the same file with styled components and the like and I'm left to think of the adage about those who don't study history. There is a lot of hubris and ego out there that builds first before understanding how we got to the percieved problem to begin with.
Tailwind is a lot like Sass already, its utility classes with some helpers, however unlike Sass you don't have to write out everything.
And thanks to PostCSS you don't have to write that classes in the HTML you can make your own class and use the @apply line so your css file not got a ton of repeating code you can do far more on one line with Tailwind them you do with Sass.
You also not have to duplicate your selectors in your media queries blocks and many extra stuff like that you will be able to just handle more easy...
With smaller css files you can make changes faster and still got your pretty meaningful classes...
Also thanks to the JIT in the new version it's much faster then SASS overall or at least on my PC.
There is far more to Tailwind than you know, you may want to look into it before you type things like this... :D
That doesn't address any of the problems with Tailwind though
What problems is that?!
I think @gibbitz already explained some of them quite well in their comment
My comment just say how to fix all his issues with Tailwind?
First of all Bootstrap and TailwindCSS are every different like Tailwind don't come with it's own components... and the classes will not really change all that much over the years because they base on the CSS it self.
This is false thanks to TailWindsCSS JIT the files you export just got the css you need noting more, noting less... I would say it would be the same size or smaller... smaller if you disable the basic reset. This is not an issue anymore for some time now!
HTML classnames more meaningful.
Almost my complete comment is about not having to put any TailWindCSS classes in the html and that you can use it really easy in css it self with the @apply
Tailwind reminds me of the pre-css world where all styling was done with HTML attributes repeated again and again in a nearly illegible mess of markup.
One again this doesn't even come close to the pre-css world like style tags could not do responsive breakpoints, and Tailwind got a ton of this helpers.
I totally agree that styled components and all that other react css, and css in Javascript are just one huge mess! But this got noting to do with Tailwind...
What I'm describing above is basically a subset of bourbon (thoughtbot.com/blog/introducing-bo...) which predated tailwind. I could use that if I wanted something pre-written.
Wiring up post-css to allow you to to use tailwind is fine. I don't see much difference in writing a property definition in css/scss and writing the same as a shorthand css utility class referencing a library. In the end you should make your decisions based on the cost of supporting dependency management and specialized configuration to do what would come out of the box if you just wrote the rules in the codebase you control yourself.
Keep in mind that you build a site once, but it may get new features multiple times per year and with security updates, breaking changes may need to be adopted along the way. The more hands that touch an application the more training or detective work (if it was developed on contract) the team will have to do. This amounts to cost too. The closer you stick to core technologies the faster you can hire and onboard new team members and the easier it is to find and solve problems. I just don't see Tailwind as necessary enough to justify these costs.
We're all going to regret how complicated our build systems have gotten in the next 5 years. I just keep hoping that the law of diminishing returns will stop us from continuing to layer complications just to get a small gain that is outweighed or negated by what is required to support it.
Scss itself has a very steep learning curve
I can see you know CSS very well: darkwiiplayer.com/
(maybe give tailwind another try ;))
You can tell a person has nothing to say about a topic when they start complaining about websites that haven't changed in almost a decade.
I wouldn't say it's laziness in my case, but more about a lack of time or wanting to spend more time on the backend. If I am working on the front end only, then I would have the liberty of setting up sass and thinking up clever class names. But that's rarely the case.
I disagree how I see it y are essentially going to make another worse version of tailwind when you need to make your own styles in css for every project
Not if you use CSS correctly, that's the point. Tailwind is just a collection of bad practices that help people avoid learning CSS.
a collection of bad practices? I dont get it.
I think you're wrong. Tailwind SS is not an excuse for being bad at CSS but in some cases it can speed up your development. When you need to be productive and keep a maintenable codebase TailwindCSS can be very useful. Make your own stylesheets can take sometimes (precedence, media queries, base styles, theming, ...) where Tailwind comes with all you need and you can start your development.
Every tools/languages has theirs usecases
And I never claimed that. I didn't really pay much attention to this in my comment but of course there's legitimate use-cases for Tailwind. My point was that an overwhelming majority of its users see it as a way of putting styling information in their HTML without having to bother learning CSS (other than its properties, which is not where the complexity comes from).
Whether tailwind should be used in general is a completely different discussion (which, I think, comes down to both preferences in code organisation and preferences about different progression curves), but that's not what I was talking about in my original comment.
Sorry if I misunderstood your comment that was how I feel it 😅
Nope you need to know CSS and you can learn it by breaking Tailwinds classes. If you are to meet deadlines and do things fast with both frontend and backend Tailwind. Everything has a purpose just cause you know css well doesnt mean everyone using Tailwind is bad at CSS :p
That is not what I said. Maybe I could have made it clearer, but my point is not that there aren't people who know what they're doing and, for whatever reason, choose to use Tailwind instead of vanilla CSS. I don't agree with them, but I respect that they simply have different priorities and know what they're doing.
My point is that most of the people using and defending Tailwind do so because they don't want to learn CSS.
They cant get away without learning css and actually thats more like Bootstrap. You can even see the Tailwind classes and improve in css. Anyways for rapid prototyping its the most effective
The abundance of frameworks covered up how the web pages are actually working. Tailwind or not, styles are still applied to a tree or elements and renders are still the most expensive part of it all. Now to paint all the DOM elements with classes it needs to walk through the whole tree, unlike style tag declaration or limited selectors.
But then again, our machines are quite powerful nowadays, so we wouldn't notice any difference anyway so we use whatever is convenient.
And it's all fine as long as new developers also get to at least have an idea of how a browser makes up an interactive page out of text files.
Laziness is the mother of invention, beginners will screw up anything you give them, frameworks and libraries are not an excuse for bad developers to not learn their job.
Interesting to know what's the reason to blame a tech which you don't understand? I don't understand why many folks like to use styled components, IMO it's much more productive and easier to support styling with TW or with css modules. But I don't blame people or the tech itself since it's me who don't understand the benefits. And I even assume that there are benefits in styled components, just not for my use cases.
This post is doing a good job to explain that Tailwind is not a replacement, it's a framework to make it quick and easier, and not to skip learning of CSS.
Like everything, it honestly depends on what you’re using it for. I write CSS or SASS for web components and Angular, but I mostly use either Tailwind or styled-components for for React. CSS gives you really granular control, but tailwind gets you 80% of the way there without interrupting your workflow by having to navigate to your stylesheet and fiddle with your custom selector.
If I’m building a UI library or a website for a design forward company it’s CSS or SASS, but if I’m just cranking out a a corporate web app, I’m not going to bother. As long as it looks clean, I can focus on features and bugs.
I think you did not work with large projects and big economic interests. The bundling and chunked css can be reduced to a minimum with defined css helper classes. The real world shows there is a gap between good designed components with modular css and none repeating css definitions and product owners who forces time to market. Another big issue are typescript definitions for css modules and the time it needs to be bundled in build processes that don't exists with inline css classes.
One point I can go with is to know css. You can't use correct css helper classes if you don't understand css in general.