You must log in or register to comment.
I have to disagree with this paragraph. That Tailwind enforces a design system is its biggest strength. Having a small selection of colors, font sizes, and padding to choose from is what makes a website feel much more cohesive than one where developers pick arbitrary values every time they style an element.
But you don’t need Tailwind for that; design systems are easy to implement these days using CSS custom properties.
I think the author is rage baiting or doesn’t appreciate design systems. Calling this “the death of web craftsmanship” is hyperbolic nonsense. I’ve seen mangled UIs in basically every CSS stack.
I use Tailwind as part of a design system’s component library, but I’ve done the same with many other tools before. As with all libs in a UI stack, there is hype, then there is fit with you and your project. I think we could do with less hype & gripe, and more well considered neutral discussion of ergonomics and technical pros & cons.
Can confirm, I have mangled UIs in almost every CSS framework, its a talent of mine apparently ᕕ( ᐛ )ᕗ
deleted by creator
deleted by creator
That being said, CSS frameworks are still wonderful, used right they can save a lot of time during early development by outsourcing the majority of design to the framework devs.
That’s actually my intent with using a CSS framework. A personal project of mine reached minimum viable product
statudstatus (phones…) recently, I included bulma, and used some of its components for stuff like menus and modals. It was definitely faster than writing everything by hand early on. But I also ended up writing my own CSS anyway, especially with the grid, which is the foundation on which my app works on (it’s a grid-based colour mixing app).I agree, I think CSS frameworks have a place for prototyping and we shouldn’t rely on them as a project moves towards a proper release 🤔
Then again, some people might think the obfuscation in 20+ classes is somehow a good thing…frankly, I think it’s worse than inline styles. It’s basically obfuscated inline styles!
Then again, some people might think the obfuscation in 20+ classes is somehow a good thing…
I’d argue that CSS is itself an obfuscation (read: abstraction), and isn’t even implemented consistently across browsers. If the abstraction results in less duplication, more consistency across the website, and higher productivity, then I don’t think that’s a bad thing. (Of course, the flip side is that if using the abstraction results in the same learning curve with less transparency, then the benefits might not outweigh the cost.)
Having never used tailwind, I can’t give a personal opinion on that, but I find it hard to work on any decently sized project without SCSS. Sure I can write pure CSS, but SCSS provides so many QoL features over raw CSS that it’s hard to pass it up, and it’s easy enough to get setup.
I mentioned some of this in another comment in this thread[1], but CSS has gotten tremendously better since Sass was first introduced in the 00s. Many features we used are now native to CSS, and can be used in your browser, today. Some of them are even better than their sass variants, or at least have special abilities sass doesn’t.
calc()comes to mind, as it can mix and match units in a way a preprocessor just cant. You can docalc(100% - 10px), which is good for all sorts of stupid corner cases.And native CSS nesting is basically 1:1 with how Sass does it:
.parent { font-weight: 600; &:hover { background: purple; } .child { font-weight: 900; } @media screen and (max-width: 800px) { display: none; } }I still use Sass or Stylus[2] on virtually all of my projects, but its nice to not have to when you just need to get something out or write a userstyle or something.
Not sure how to provide an instance agnostic link, the few things I’ve seen people attempt didn’t work, but here’s the lemdro.id link ↩︎
I’m largely giving up on Stylus, its sadly unmaintained. My favorite preprocessor though; takes
.sass(indented) style to a whole new level on what you can omit ↩︎
Tailwind is just shorthand inline CSS.
Very good article imo. I didn’t disagree with anything. I especially agree with the ugliness of the many class names in my html.
My problem I guess is reconciling how much of a pleasure it’s been to use. Perhaps I, a primarily backend developer historically, embody the death of web craftsmanship, but I don’t really want to learn modern CSS if I don’t have to 😅
The easier I can get something styled and back to doing actual business logic rather than making things pretty the happier I am. I highly respect frontend styling gurus but I’m not that interested in spending time mastering true web craftsmanship, I care more about delivering the product as fast and as beautifully to the user as possible.
I’d encourage you to take a look at modern CSS with a fresh eye. It’s gotten really good. Good enough I’ve got another blog post in the works talking about how much goddamned fun its gotten. In the last few years alone, we’ve got sass-style nesting, parent selectors (!), combinator selectors (roughly like list comprehensions in their ability to fill out a matrix of potential selectables), color functions, and far more.
wholeheartedly agree! css has been my main job for going on 15 years because i’ve always enjoyed its quirks. the past 5 years or so have felt like leaps and bounds in terms of how i structure markup and styling. it’s such a fun language to learn. stuff like flex and grid make my work so much easier so i can spend more time on the fun stuff.
But can you vertically and horizontally align something that isn’t text reliably by now?
Thank you for this response. Indeed I will. And feel excited to do so :) Look forward to that blog post as well.
I mean, for me, the greatest pro I’ve heard for the usage of Tailwind is that it makes collaboration much easier. For example, a PR to add styling to a component is easy to read - you just see the new classes added. Not only that but you know that it only affects that element and that no CSS is still being kept in your CSS files that is no longer being used.
The cascade is seen by some as one of the most annoying parts of CSS at times because it can make debugging harder - and many will simply abuse
!importantas a result.I’d argue that styled components, like Vue SFCs or Surface-ui, are even better in this regard. You can see the whole component there, and all the classes along for the ride. And they’re usually written in something fairly close to “real” CSS
But I mean, if they’re gonna be component specific CSS, why even bother over just using tailwind?
Well, you get all the real advantages of real CSS. The browser tools work. Various other preprocessors work. You can use timesavers like Sass or Less or whatever else.
The biggest advantage, imo, of using a component based design, where components handle not only the styling but the entire appearance of a “thing”, is that you make the contracts for what that thing has to support explicit. If your button needs to be able to change colors, you can add a prop that exposes that ability. If it needs to change sizes, again, that can be exposed by a prop. But they aren’t by default.
You can sort of accomplish this in “real” css using attributes carefully, but its not as elegant.
i think about this article a lot whenever i hear about tailwind.
https://thoughtbot.com/blog/tailwind-and-the-femininity-of-css
Interesting perspective. I’ve added it to the appendix at the bottom of the article
… I’m very much not sure how I feel about that article. And I don’t mean that in a negative way, it’s just very… huh.
So glad people are catching on to this. Until like a month ago if you said anything bad about Tailwind you would literally get shadowbanned on HN.
Isn’t that still the case there?
Idk, this post is getting a healthy debate over there.
Amusingly, reddit is full of smartest-guys-in-the-room, who are all tripping over themselves to defend tailwind. Very much “LEAVE
BrittneyTailwind alone!”There was a post about plain HTML-and-CSS there that was anti-Tailwind the other day, although I can’t find it now. Seeing both of these posts is why I made my comment. :)
Tailwind only really makes sense in a precise use case that absolutely does not cover everything web based and I wish the makers where clearer about it.
First off, the abstraction problem: since you give up on defining custom classes at length, elements will often receive more than a dozen utility classes. This is fine IF you use a component based framework like Vue and you break down your app into components with a small granularity.
Second, the stylesheet problem: even minified and compressed, a stylesheet containing all of Tailwind’s utility classes is multiple Megabytes. The issue will not come from where you’d expect; downloading may take a while on the first page load, but all page loads will suffer from taking into account such a massive set of rules. Tree shaking makes this fine IF your content is already known at the moment of building the app.
In the end I feel that Tailwind implements ideas on top of tech it is incompatible with and the abstractions it create are seriously leaking.
Ok so use modern frameworks and tools that implement the tailwind plugin. Because if you are shipping the entire tailwind css that’s a developer problem not tailwinds. News flash: using a technology wrong doesn’t make the tech wrong.
News flash: your snark makes you an unpleasant person. Read my comment again. I said tree shaking fixes this… unless you don’t know what content you’ll display and what classes you’ll need at build time. Not all sites are static.
Unless you are going to be allowing custom html to be added the tooling is smart enough to figure out what possible classes your code can use. You’d have to do something dumb to not have the tools able to tell what components you are serving.
More generally, the more you have a flexible editor in the app, the worst it gets. This is the use case where I ran into trouble.
Make an element that is hidden that has all possible values of classes you can use. Or use normal css for that one part of your app if that isn’t possible. Lots of ways you can handle this without thinking the framework doesn’t work.
Ninja:
https://tailwindcss.com/docs/content-configuration#safelisting-classes
Tailwind actually has this use case covered already. Use the safe list functionality to always include the classes you need.
The “News Flash” bit was unnecessary. Please keep your replies to other users respectful on Beehaw.
Thanks!
— !programming@beehaw.org Moderation Team
I don’t believe anyone who uses tailwind is shipping the whole thing with all of those megabytes of classes in production. It’s actually sort of hard to even do that on accident if you’re following a tutorial or their official docs.
I am not sure how other people do it but we use tailwind in SASS using the apply directive, inside a BEM-first structure. I feel like this is the best of what everything can offer.
You might consider dropping tailwind entirely then, and using something like open-props, which gives you basically all the features of apply, but in a native CSS package
I’ve seen people, lead and principal engineers, who refuse to learn modern JS, insisting that since it was bad in 2006 its bad today.
It’s still bad, though. That’s not the reason why, but it still is. All the frameworks and things like TypeScript try to work around and hide the uglyness and stupidity of JavaScript, but they neither remove nor fix it. The way HTML was initially designed is the exact opposite of how it is used. It was intended to present data in a standardized way and leave the rendering and styling to the client application. People tried to create pixel-perfect designs with it. The entire resulting technology stack was created by idiots for idiots. And JavaScript is consistent in the misguidedness of the endeavor. All the marketing talk about platform independence is bullshit. It is easier to write platform independent GUI applications in C than in HTML + CSS + JavaScript. All the frameworks and languages transpiling to JavaScript trying to belie that just lead to a breeding ground of incompetent GUI developers doing esotheric coding (“doing it the way it is done” while understanding zilch about the fundament). The resulting developers are useless outside of their steaming pile of web GUI shit. The least worse of them are the ones promoting and perpetuating this failed technology stack by adding further layers of abstraction to try and hide that it is build on and from shit, creating even more esoteric developers in the process - by idiots, for idiots. Web GUI developers are paid less than any other branch of developers and it is completely justified.
It is easier to write platform independent GUI applications in C than in HTML + CSS + JavaScript.
Um, what? There are very few GUI toolkits targeting both desktops and phones, and none of them are reasonably usable from C.
You forgot to read the very small fineprint after the rant hyperbole: *) true for desktop applications. You could go with C++ and QT. Though, writing C++ code is never easy/fun (still better than JavaScript, though). Any argument about natively compiled multi platform GUI applications regarding mobile is moot either way for multiple reasons. The angle I’m going to push here is: Everybody and his mother tries to push their custom iOS and Android apps, relegating web sites to the desktop. Any multi platform GUI toolkit with a cross-compilable language will give you twice the functionality in half the development time over HTML+CSS+JavaScript. And don’t get me wrong: I’m not really suggesting that websites have no place. And there are good reasons to want websites. I’m trying to paint a picture what a horrible absolute clusterfuck the web GUI technology stack is.
Any multi platform GUI toolkit with a cross-compilable language will give you twice the functionality in half the development time over HTML+CSS+JavaScript.
Hundreds of companies have tried to solve this exact problem for years and already did the cost/benefit analysis. It turns out that writing almost all of your code exactly once is cheaper than doing it in the multiple stacks that would be required with whatever your dream architecture is. They are not idiots just because you want them to be.
You sound like someone with zero practical experience in this area who just wants to rant about code purity. The rest of us are trying to get shit done while you pine for a perfect technology stack that will never exist.
You forgot to read the very small fineprint after the rant hyperbole: *) true for desktop applications.
Ignoring phones in 2023 is patent nonsense.
You could go with C++ and QT. Though, writing C++ code is never easy/fun
It’s also ludicrously expensive, so as far as I’m concerned, it doesn’t exist.
Everybody and his mother tries to push their custom iOS and Android apps, relegating web sites to the desktop.
Madness. I’m not going to develop and maintain three completely different versions of the same app in perpetuity.
Any multi platform GUI toolkit with a cross-compilable language will give you twice the functionality in half the development time over HTML+CSS+JavaScript.
Maybe it would if one existed.
I’m trying to paint a picture what a horrible absolute clusterfuck the web GUI technology stack is.
I don’t disagree, but I also don’t see any viable alternative.
It’s also ludicrously expensive, so as far as I’m concerned, it doesn’t exist.
QT, writing C++, or both? Paying for a good technology can be cheaper in the long run if you save development time. And sure, developing in C++ is more expensive than JavaScript, because you can’t let cheap web code monkeys do it.
Madness
Indeed. But, very common madness.
Maybe it would if one existed.
I think I made it quite clear, that I set the scope for the desktop. There are several. At least QT even includes mobile.
I don’t disagree, but I also don’t see any viable alternative.
It’s nice to “agree to agree” sometimes ;-)
QT, writing C++, or both?
Qt.
Paying for a good technology can be cheaper in the long run if you save development time.
Only until the price gets jacked up beyond what you can afford, and then you’re scrambling to rewrite your entire application to use something else that’s still affordable.
And sure, developing in C++ is more expensive than JavaScript, because you can’t let cheap web code monkeys do it.
An awful lot of code is written in C++, so I’m not sure that was ever a serious constraint.
I think I made it quite clear, that I set the scope for the desktop. There are several.
Sure, if we’re targeting desktop only, then there are lots of options: GTK, wxWidgets, Swing…
But what does it matter? You can’t ignore mobile in 2023.
Little add-on re viable alternative: Silverlight could have been nice, hadn’t Microsoft fucked it up and implemented it as a Windows-only ActiveX control.
With .NET Core/.NET 5+ being open source and platform independent, that idea/concept could be revisited. A trimmed down .NET framework in a sandbox with proper DOM integration would be a massive upgrade over all the JavaScript garbage.
That only helps if there’s a viable FOSS toolchain for .NET, including editor and debugger, which as far as I know is still proprietary. Using proprietary development tools is to be avoided if at all possible, not only because of principles but also because they will create problems that you are powerless to solve.
There is the fully open source debugger from Samsung, the Red Hat derivate/extension for eclipse and others are in the works. I’m happily debugging .NET applications with JetBrains’ debugger on linux. One tool by Microsoft for the ecosystem not being open source, doesn’t change .NET (Core/5+) being open source. Embedding a stripped down .NET Framework in browsers as a replacement/alternative to JavaScript, even if not required, would likely lead to the development of one or more new debuggers anyways, to have an in-browser development experience similar to how it is now with JavaScript.
Lol so you’re one of the devs the author is talking about. Imagine getting this worked up over a topic you clearly don’t understand. “Failed technology stack” – that’s right everyone, the most widely used stack on the planet is a failure because this guy doesn’t like javascript. Everyone else in the world is obviously a stupid moron for not seeing things his way.
If you program in anything other than machine code you are an idiot. Remember that next time you use a failed abstraction like C.
Can’t believe this nonsense actually got upvoted. You never even identify any real issues with modern JS or HTML. It’s just a bunch of run-on whining. “HTML was meant to provide a standardized way for presenting data” – lol so literally how it’s still used today.
At least C has a working equals operator. Go on, tell me about ===, invite the ridicule. I bet I know more about JavaScript than you do. I hate it because I am intimately familiar with it.
console.log(null==0) console.log(null>0) console.log(null>=0) console.log(0==[]) console.log(0=='0') console.log('0'==[]) // no equality comparison, but that shit is funny console.log("2"+"2"-"2")Any proper programming language wouldn’t even compile any of that nonsense.
And something being widespread doesn’t mean it’s either right or good - look at religions.
I think the article fails to mention that one of the reasons tools like Tailwind (and methodologies like BEM, etc.) exist in the first place is to facilitate bigger organisation sites.
In my personal experience “plain old CSS” isn’t feasible as the number of mainterners on a site goes up. Once there is multiple teams (possibly even across multiple departments) contributing to a site, the cascading part of CSS means that it is more or less unavoidable that some change from one team unintentionally breaks something for another team - and this being visual things means that it is very hard to catch with automated tests.
After having working in a big organisation for a while, most developers will eventually start wishing for something that would make sure that their CSS only applies to their own components.
divtags with inline style attributes suddenly starts to look very attractive - which is what eventually led to something like Tailwind.While I understand the idea behind using CSS “correctly”, I have, in my 15 years of professional experience, never ever seen even one project where the hypothetical promises of CSS were actually realized. It ALWAYS ends up with a fuckton of importants, or hunting for ages for the one class fifteen levels of abstraction up that changes your one element, coming up with more and more absurd class names, until they are literally no different from just some random name. Tailwind might seem horrible in a theoretical sense, but in an actually using it sense it’s a heaven sent. I want to change the padding on THIS ONE SINGLE ELEMENT, I change it EXACTLY RIGHT THERE where the element is defined, and i can be absolutely sure that I haven’t accidentally cascaded someone else’s work to death.
#CSS, in practice, is the insane idea of every single element on your website sharing global, mutable state, and thinking that’s in anyway smart.
Websites that use reasonable or good HTML markup with structure, the correct HTML tags, useful ids and classes are great to work with. But regularly you see websites with generated HTML without any useful identifiers or structure. A generated garbled mess of anonymous, generic components and styling CSS classes.
I’ve worked on content extraction for OpenTermsArchive and write my own injected CSS hacks and browser extensions. Working with good website sources is great. Working with garbled messes is awful.
HTML losing its markup aspect - that you can traverse and select - makes websites inaccessible.
/edit - adding:
The CSS tailwind generates might not be bloated, but repeating the gigantic strings of classes all over your codebase certainly adds to the size of the final HTML output.
The HTML is not just bigger, but bloated and inaccessible. HTML markup with identifiers and classes is readable and understandable. It has structure and labeling. Inlining styling rules bloats it to the point of unreadability. And losing identifiers and classes is a loss of labeling and selectors.
deleted by creator
