If you are a beginner, [...] do not start with Tailwind.
Good, good! May I add some lines?
If you are mid level, do not start with Tailwind.
If you are a senior, do not start with Tailwind.
If you are a guru, do not start with Tailwind.
In short, do not start with Tailwind ever, period.
You call CSS users "purists" versus Tailwind's "pragmatists", but let's see what Tailwind's adoption means pragmatically:
of course, readability goes down the drain;
for every .css files that goes from 150 kb to 40, every html page goes up from 20 kb to 40;
and don't start with "HTML can be compressed very well": CSS can too;
CSS files are aggressively cached by browsers, HTML are not.
it's never Tailwind alone: here comes a plethora of plugins and packages, from your IDE to runtime, that you have to install just to get a grip on the mess;
debugging with dev tools becomes an awful experience;
I could honestly write a whole series on the matter, but I fear it could unleash mean reactions from the frontend community.
Tailwind fans often show how they get the best from LLMs because they answer using Tailwind basically by default. Problems arise when a new major version of Tailwind comes out, and AI will still give answers based on the old version for months. It already happened.
The aid you get from fast prototyping gives the false impression that everything can be assimilated as a fire-and-forget project, thus neglecting maintainability.
When you take zero effort in naming a class, you don't think about what meaning or purpose an element has: this seems liberating at first, but in the end this is what happens:
we stop thinking about the meaning not only of classes, but of attributes and tag names. Everything becomes a <div>, and DOM size and accessibility suffer;
we carry long strings of Tailwind class names around in our runtimes because what we have left is merely a presentational effect, and not a meaning anymore.
Wanna learn from the masters? Tailwind's own website is a disaster, where you can find class names several thousand characters long because they embed a freaking PNG in base 64! Nobody really know what to do with Tailwind.
This is crystal clear when so many devs defy one of the main advantages of using utility classes: not having to name things. Instead, so many use @apply, others pack class names together in "variants" (which you have to name).
And in the latter case, it all happens at runtime, which is something we loathed so much in those CSS-in-JS libraries, but now it's acceptable somehow.
By the way, @apply will conflict with the upcoming native CSS mixins: which means Tailwind will prove itself to be not future-proof yet again, after Tailwind 3 inability to use @layer freely.
Not to mention having to wait for a new major release just to support a new native CSS syntax, which is doubly ludicrous as a feature could be available for months before you could use it, and has been conceived by renowned tech experts and browser representatives, instead of Adam Wathan's capricious unvetted ideas.
The result of short-term gain and a lot of advertising has created the most toxic community of klout chasers around something so foundational like CSS, it's honestly disgusting. I swear I've seen the exact same post about a "revolutionary technique" with Tailwind posted on LinkedIn by some self-appointed "senior full-stack development architect" or whatever that's actually a copy of a post by David Khourshid on Twitter.
And apropos of that, Tailwind's bracket syntax is a giant middle finger to whoever conceived CSS as a structured language to express complex relationships, to the consolidated best practice to avoid magic numbers, and to the usual convention of having a specificity of 0.1.0 for utility classes.
Let's not forget classes have been conceived more than a quarter of a century ago, when we didn't have anything better: now we do and we can be more expressive and effective without using classes altogether (I've been doing this for years now).
Thank you for taking the time! With such strong insightful opinions I would love if you published more posts, even reasonable rants are very entertaining content. Do you have an active blog or newsletter I can check out?
"The Vanilla CSS file would grow Linearly." Only if you want every page to look entirely different from every other page on your web site, or you're really bad at choosing class names.
On any normal site, if the class names are well-chosen to reflect the semantic domain space of the site's content, many of the classes you use on your home page are going to be reused across all the other pages. The second page you create will add a few extra classes and some of these too will be used across many subsequent pages. The growth curve will be a very similar shape to Tailwind's.
That is not quite true.
CSS is a standard that is widely applicable and will be for years to come.
Tailwind, a good as it is, is a skill that might not be applicable in your next project and will some day be replaced by the next shiny new tool.
Besides, each additional tool or library is project bloat. Standard web technologies are built into the browser.
This also applies to Fetch API v Axios, and I really like Axios.
Sorry, but the bias on this is obvious. Phrases like "I didn't have to create a new class" hide how simple it is. And your HTML isn't polluted like it is with Tailwind. Take a look at "Why Nue" and remember web development when it was actually web development, not investing a whole learning slope for something that the web doesn't actually use.
Love the nautical-themed comparison! Tailwind CSS might be the trusty compass that keeps your design on course, but Vanilla CSS is the open sea where you chart your own course and learn the ropes. Can't help but wonder about how you handle the trade-off between file size and project complexity in your own work?
Good, good! May I add some lines?
In short, do not start with Tailwind ever, period.
You call CSS users "purists" versus Tailwind's "pragmatists", but let's see what Tailwind's adoption means pragmatically:
I can go on for hours.
Please do, I'm interested in what's left :)
I could honestly write a whole series on the matter, but I fear it could unleash mean reactions from the frontend community.
<div>, and DOM size and accessibility suffer;@apply, others pack class names together in "variants" (which you have to name).@applywill conflict with the upcoming native CSS mixins: which means Tailwind will prove itself to be not future-proof yet again, after Tailwind 3 inability to use@layerfreely.Enough?
Thank you for taking the time! With such strong insightful opinions I would love if you published more posts, even reasonable rants are very entertaining content. Do you have an active blog or newsletter I can check out?
When you still want to know more, have a look the articles of Jason Knight a.k.a deathshadow [RIP]](deathshadow.medium.com/) on medium
Thanks for linking, will check it out!
"The Vanilla CSS file would grow Linearly." Only if you want every page to look entirely different from every other page on your web site, or you're really bad at choosing class names.
On any normal site, if the class names are well-chosen to reflect the semantic domain space of the site's content, many of the classes you use on your home page are going to be reused across all the other pages. The second page you create will add a few extra classes and some of these too will be used across many subsequent pages. The growth curve will be a very similar shape to Tailwind's.
Thanks for pointing that out. In the end it comes down to personal preference, I guess...
That is not quite true.
CSS is a standard that is widely applicable and will be for years to come.
Tailwind, a good as it is, is a skill that might not be applicable in your next project and will some day be replaced by the next shiny new tool.
Besides, each additional tool or library is project bloat. Standard web technologies are built into the browser.
This also applies to Fetch API v Axios, and I really like Axios.
True!
Sorry, but the bias on this is obvious. Phrases like "I didn't have to create a new class" hide how simple it is. And your HTML isn't polluted like it is with Tailwind. Take a look at "Why Nue" and remember web development when it was actually web development, not investing a whole learning slope for something that the web doesn't actually use.
Will check out Nue!
Love the nautical-themed comparison! Tailwind CSS might be the trusty compass that keeps your design on course, but Vanilla CSS is the open sea where you chart your own course and learn the ropes. Can't help but wonder about how you handle the trade-off between file size and project complexity in your own work?
Nice ai response
Congrats.
Good for use
🫡
True!