DEV Community

Discussion on: Why Tailwind Isn't for Me

Collapse
viorelmocanu profile image
Viorel Mocanu

Wonderful article, Jared!

Let's face it: most of the people loving utility-first CSS don't really remember csszengarden.com/ and what it stood for back in the day. :) And leaving melancholic issues aside, Tailwind is great for rapid prototyping and developer-heavy teams that need to churn out loads of content super fast with no substantial need for maintenance and future-proofing. What I love the most about it (compared to Bootstrap for example) is the fact it does tree shaking of sorts and leaves only the CSS you actually use in the production package.

But that's pretty much it. For large-scale enterprise-level projects, I would go out on a limb and say vanilla CSS (including variables) + SASS is the only way to go if you don't want to have massive headaches with maintaining everything going forward.

I'd add from experience that with a very particular way of writing all media queries mobile-first (with min-width only) directly inside the element they modify (respecting the cascade) gets you the clarity and atomic precision you need when making highly responsive, complex web apps. The sheer elegance of copy-pasting the element class from the browser inspector into the SASS file and reading all the ways that one element adapts to all resolutions in one scan of the eye is what saved a lot of time on some of the projects I've had the pleasure to impose coding standards for.

Collapse
jaredcwhite profile image
Jared White Author

Good points all around. I should point out that, regarding "it does tree shaking of sorts and leaves only the CSS you actually use in the production package" β€” you can do this with any CSS framework via PurgeCSS. I think Tailwind popularized the technique because you have to purge when using Tailwind. 😏 But you can purge with Bootstrap, Bulma, or any number of other frameworks.

At the rest of sounding like a broken record, you mentioned churning out loads of content super-fast with no need for future maintenanceβ€”so here's the deal: if Tailwind specifically advertised itself for exactly that use case, I'd be cheering from the bleachers. Go to town! Churn out that content, pat yourself on the back, and call it a day.

But to think Tailwind is the solution to long-term, multi-year projects where you want your code to be clean, lean, and mean…it's bananas to me.

Collapse
viorelmocanu profile image
Viorel Mocanu

PurgeCSS is wonderful but it's a very missable extra step at the end of the project if the team doesn't have this reflex built into the workflow. The fact that you can purge (and you should purge) doesn't mean everybody does it, unfortunately. Just take a look at the top 1000 sites by traffic (according to e.g. Alexa). Or the 40% of the Internet that's WordPress-based. Things are better than they used to be but are still way off the ideal.

I completely agree with your point of view regarding Tailwind. Cheers for writing this article! :)

Thread Thread
jaredcwhite profile image
Jared White Author

Yep, Purge CSS is a cool thing to have, but there are a lot of subtle edge cases and bugs that will trip folks up, including me! Not a set-and-forget solution.

Collapse
viorelmocanu profile image
Viorel Mocanu

P.S.
By the way, I found an unexpected (somewhat narrow) benefit of Tailwind or utility-first styles in general, which derives from the notion of rapid prototyping: if you're doing A/B testing using Google Optimize and the like, you need to write exactly zero CSS in order to create a completely different page design "in situ" (read: directly in Optimize's interface) because you can reuse those horrible utility classes and be done with it in the HTML alone.

Collapse
stikoo profile image
Alastair Hodgson

Until you try to use a class that has been purged :p

Collapse
stikoo profile image
Alastair Hodgson

No, we old timers haven't forgotten what CSS Zen Garden represented (I built one!), we just understand that the principle of one HTML file many Stylesheets was never really practical in the real world of corporate development (at least not in the hundreds of large scale projects I've worked on).

I disagree on your point about Tailwind not being suitable for large scale projects, I've lead, architected and produced big enterprise websites using vanilla CSS, Bootstrap, Foundation, LESS, Ruby SASS (ouch) and Node SASS and co. For a good few years I boiled it down to Node SASS + BEM and it "worked". But I always had problems with it scaling up. Trying to keep things DRY, reusing components, all those best practises etc ultimately failed as the codebase gets out of hand, component count gets silly and attempts to try and make flexible components results in out of control BEM modifiers and specificity hell. It's almost impossible to avoid this when you work in large multi-channel teams.

I don't like fragile codebases and with Tailwind, I've found I don't get that, if anything it scales more easily, it works at prototype level because it's fairly quick to write, but for me it excels at scale where multiple devs can work on a project without fear of breaking things.

As for maintainability, I will swap jumping into a custom in-house CSS frankenwork (I can call them that, because I've unfortunately played major roles in creating them :D)
for a predictable tailwind codebase any day! The consistent language and style really helps shift between projects.

I love CSS, made a career out of it, I would consider myself a master of CSS, but I think Tailwind really helps with some of the pain points of large CSS projects and no amount of CSS custom properties are going to fix that.

I don't understand arguments about

soup either as I will always strive to create semantic well formed markup with or without Tailwind, I think one of the major problems with web development these days is that the art of creating great HTML has kind of been lost a little.

What I do know is that someone, somewhere will create something else in the future that solves all of our CSS woes and we'll be having these same discussions all over again soon :D