Tailwind and slop apps
Posted by coneonthefloor 5 days ago
Comments
Comment by gibbitz 5 days ago
Comment by homebrewer 5 days ago
(In my experience, it's never been "this doesn't look as good as the latest version of Discord", or whatever.)
Comment by gibbitz 5 days ago
Comment by rcxdude 4 days ago
(more precisely, I long for the days of a standard and customizable UI toolkit. I should be the one who can adjust what the UI looks like, not hundreds of different designers with different concepts of how to 'stand out')
Comment by ryanbrunner 4 days ago
Take the author's example in this article - he calls out two things more than anything - a single sentence "pitchy" description of the product, and plan cards that look and feel extremely samey from site to site. I'd argue that both of these "downsides" are an upside for me as a consumer:
- Having a one sentence quick summary of what a product does allows me to make a quick decision about whether I'm interested in reading more about this product.
- Consistent plan cards lets me leverage my shared understanding of how plan cards work to instantly answer questions like what the monthly / annual pricing is like, what tiers are available, etc, that a bespoke presentation would require me to think about.
If I come to a landing page for a product, I'm more interested in answering questions like "is this a product I would like" and "how much does it cost" than appreciating the design of a page.
Comment by JimsonYang 5 days ago
Comment by timr 5 days ago
Comment by ceritium 4 days ago
Comment by trueno 4 days ago
pair that with the field of ui/ux thinking landing pages that say nothing at all and you get a million webpages that look the same. every sass does this. in fact, every saas had a slop feeling to it because of this before AI took off. before chat friggen jippity and now claude and gemini were ubiquitous, i was regularly rolling my eyes at every. single. saas. website.
all the examples in OP don't look like a tailwind specific thing to me at all. they look like a broader boring internet-webdev equivalent to live laugh love pinterest home interior designs that predates the AI slopfest. this is the web styling VC's have been demanding from the startups they've invested in for many years now.
as far as tailwind goes, it's more like a utility set of classes but i see no reason why you can't get creative with it. feel like it's catching strays here simply because everyone's vibe coding and it's a common path for trained models to choose but that really says not a lot about tailwind and a whole lot about how people are choosing to use tailwind. it's not like tailwinds providing a breadth of components or is locking in certain stylistic elements. it's just that everyone's making the same choices because everyone's slopping their front ends.
Comment by avindrag 5 days ago
Bootstrap ships components. AFAIK you need another library if you want that in Tailwind.
Comment by elicash 5 days ago
https://news.ycombinator.com/item?id=11287413
(The underlying webpage is no longer around. But the HN discussion is.)
Comment by ivewonyoung 5 days ago
Comment by stackghost 5 days ago
I haven't used it in ages, but it used to be that Bootstrap also shipped drop-in CSS that would give you decent-looking styles on all the common elements, so a single minified style sheet would give you that classic "2010s startup" look.
Comment by alexchantavy 5 days ago
Comment by youngtaff 5 days ago
Comment by Gualdrapo 5 days ago
That abstraction is what brings the "sameness" factor in play, though.
Comment by crooked-v 5 days ago
Comment by iamsaitam 5 days ago
Comment by ffsm8 5 days ago
But yeh, they aren't the thing we're talking about here.
Comment by crooked-v 5 days ago
Comment by wild_egg 5 days ago
Comment by ryanbrunner 3 days ago
Comment by emodendroket 5 days ago
Comment by tptacek 5 days ago
Comment by Barrin92 5 days ago
yes, and who wants creativity and risk when everything can look like the interior of a McDonalds. I'd much rather look at someone's terrible and scuffed attempt at designing their own page, because it at least signals that there is a human who isn't afraid to try something out rather than the Instagram filter version of a webpage.
Comment by tptacek 5 days ago
If you're building the application equivalent of JP Graziano or La Chaparrita Taqueria, make it human, scuffed up even. I'd like JP Graziano less if it looked like a Cheesecake Factory. Right there with you. But if you're building a tool, for developers, one that will mostly be used to conduct some kind of business? Boring competence wins hands down. Users and customers are scouting for competence. Most of the time, their antennae are not in fact up for individual artistic expression.
Comment by Barrin92 5 days ago
but even that doesn't really hold any more. The great slopification has made it so that people don't even associate that kind of thing with reliability. Instead it's gotten a kind of ca the year 2000 "thing out of a Chinese factory" vibe to it. Even on practical grounds you might as well give it your own shot now because that stuff is poisoned.
As a concrete example, if you wanted to make a Github competitor ten years ago you tried to look like Github, now you're better off trying to look like sourcehut or codeberg because you don't look like the thing that dies every five minutes.
Comment by tptacek 5 days ago
When Stripe or Braintree or Paypal deliberately mess up their designs so they can signal their humanity to customers, I'll check back in with this idea. Maybe companies will start introducing dumb bugs into their code, too, because if it's too perfect everybody will know a robot wrote it.
Comment by emodendroket 5 days ago
Comment by xkcd-sucks 5 days ago
Comment by tptacek 5 days ago
Comment by anon7000 5 days ago
The “vibe” of a product is absolutely important. Do logstash and datadog have similar vibes in their log viewers? Fuck no. I can instantly tell I’m using something related to that tool because of its design language. That helps it stay sticky. If you’re datadog, you don’t want users thinking the product feels and looks exactly like all the other log viewers. You want them to think it’s unique and the best or whatever. Marketing sites extend that, and are absolutely a component of the “vibes” you get from a product before doing a strict engineering breakdown.
Comment by alabut 5 days ago
Yes they both have the same overall structure as the Stripe landing page but if you can't tell the difference between the level of execution of those three, then you're just arguing for mediocrity.
Comment by alt187 5 days ago
Comment by ryanbrunner 4 days ago
The mechanic is a separate argument - the article is talking about uniqueness of design and creativity, not cleanliness / orderliness. These sort of Tailwind designs are exceptionally clean and orderly, they're just predictable and not unique. To apply the article to your analogy, I wouldn't particularly care if my mechanic had the same coveralls that most mechanics wear as opposed to some unique design of coveralls.
Comment by joseda-hg 4 days ago
I know plenty of DJ's that are surprisingly tech averse, whatever art is on their pages, is more of a testament to who they hired as a designer than their own artistic acumen
Comment by tptacek 4 days ago
Comment by WatchDog 5 days ago
The authors blog design is perfectly functional, and I'm not suggesting that it needs any changes, but it also isn't a particularly impressive piece of web design.
Comment by Raed667 5 days ago
Comment by vitamark 5 days ago
It's just a weird way to write CSS right in the classes. We have a tool for that, it's called "writing CSS", and it actually has classes that allow sharing style choices across various components (which somehow is marketed as feature of TW)
In other words, I don't see how Tailwind is just "I want to write my CSS in obscure way in the wrong place".
Comment by pennomi 4 days ago
A “perfect” website has things cleanly separated out between style, logic, and DOM, but that does cause cases where you might have to edit three files every time you change a single widget of your website. Neglecting to do that can leave dead or incorrect code just because the issues do not inherently present themselves to you.
Yes, a perfectly principled programmer would do it right… but have you worked with other people before? They’re not necessarily very reliable.
Comment by ryanbrunner 4 days ago
Really the decision comes down to whether it's better to separate based on style/logic/dom or on the business domain, and I think at least for web apps, separation by domain wins out in most cases.
Comment by Induane 4 days ago
1. Locality of behavior - the classes are the description of the style once you know tailwind, and they live where the thing they're styling is. I can look at a template and know pretty well how it is going to look without having to go lookup a sites personal bespoke CSS and match what's written there to the markup.
2. It's the same classes as you move from project to project. I have tons of small one-off apps I maintain, all using tailwind and I don't have to figure out the custom CSS classes and their meanings. It is a knowledge set that reduces friction between projects and I really need things that reduce cognitive load like that.
3. No dead CSS. There are tools to help with this in regular CSS but I just don't have to think about it with tailwind and that's nice. I work on my templates and the CSS is updated and minifed on the fly without extra steps (or unnecessary CSS).
4. Easy to build a personal component library that doesn't also require relevant CSS to be bundles with it. For me this one is pretty great. Thanks to template engines (for me it's Django's, but Jinja or others are grand too) I have a simple place to pull components (really just template partials) and widgets I've made and they just work because the underlying classes are the same. There are some exceptions around color schemes and the like but now all my little components take a colour scheme arg and voila, no proballo.
I think the key here is that a description of the visual is embedded in the markup. That lets the actual mark-up delivered to the front-end describe pretty much the whole kit. With server-side rendering ( I use HTMX ) I can even write unittests that responses contain expected markup, including CSS classes (I built a few helper assertions that all of my test suites use) which gives me some interesting checks.
I really ultimately don't think there is one correct way to do things. The things I value may be utterly irrelevant to another developer.
Comment by vitamark 4 days ago
What I find with any site is that without a good foundation you're bound to repeat same styles over and over, and with one you don't get any point with Tailwind.
Comment by cadamsdotcom 5 days ago
Deeply flawed unfortunately.
For example - and I know it may not map cleanly back to software, but it’s worth thinking about - some of the best food is served in restaurants with plastic chairs and tables where the decor is an afterthought.
Comment by FullGrinder 5 days ago
Comment by usernamed7 5 days ago
Tailwind has a unique benefit in that you can change the CSS of the page and just that page. There is no chance that you make a change that breaks the rest of the site because you wrote a rule wrong. In some environments/applications this is a big deal.
But honestly that's the only credit i'll give it. The class names are still confusing to me and you do get more flexibility with CSS. And i'd rather be writing classless css and targeting custom HTML elements anyway.
Comment by SkiFreeWin3 5 days ago
Comment by finjo 5 days ago
The best way to figure out how to prompt an LLM is to develop design skills so you know what to tell it.
Comment by SkiFreeWin3 5 days ago
I’ve been in the industry a long time. Even before LLMs, I think web design would get stuck in cycles. So I just want it to spit out something that looks novel and interesting, which pushes me to coach it even better.
Comment by finjo 5 days ago
Comment by edoceo 5 days ago
Same as you have to be explicit about instructions to humans.
Even humans use their default assumptions w/o clear directions
Comment by 0x62 5 days ago
Comment by simonw 5 days ago
Comment by asp_hornet 5 days ago
Comment by onlyrealcuzzo 5 days ago
Comment by JimsonYang 5 days ago
Imo UI is bifurcated. Its either not impressive(most websites) or there was immense effort put into it(like posthogs site).
So for a small project where im focusing on shipping speed and feature building, yeah tailwin is being used because I dont want to do motion design rn
Comment by queenkjuul 5 days ago
The big gradient fonts came from Apple Keynote, i thought. At least that's where i first saw templates like that.
Comment by t1234s 5 days ago
Comment by finjo 5 days ago
Just shipping a tailwind template is lazy and trite. But LLMs are made to optimize for the lazy and trite. They can only choose the lowest-common denominator.
LLMs don’t really know how to give designs personality. Most of the time I see attempts to improve the situation that basically just boil down to vibe-coded slop that’s prettier. I’m sure better designs exist, but the ones that do exist are almost certainly about the person who drove the LLM, not the LLM itself.
Comment by insumanth 5 days ago
Comment by ZeroGravitas 4 days ago
People used to say this a lot about Bootstrap.
Someone set up a bootstrap or not? guessing game and the real surprise was that you not only failed to spot some bootstrap sites you also guessed a lot of non-bootstrap sites were bootstrap because they all used the same modern UX paradigms.
Comment by 1shooner 4 days ago
I think what they're actually experiencing is that they can instantly tell a default Tailwind site with reused components, which is not much of a claim at all.
Comment by distalx 5 days ago
I think it's slop to many of us, but to a general user, they just aren't seeing it as slop.
Comment by nih567 4 days ago
Comment by LogicFailsMe 4 days ago
Comment by srdjanr 5 days ago
There definitely is a distinct AI "design" look, I just don't really see it here.
Comment by mcapodici 4 days ago
Comment by ookblah 5 days ago
the entire industry has always been converging toward "cookie-cutter" ui, and tailwind is just this cycle's flavor and now on steroids with AI. Honestly for 90% of the stuff out there that's literally fine and probably better. There was a time when being extra creative in FE work was rewarded. If your product is very brand dependent then yeah maybe try to find your "voice" but for the vast majority of them, esp dev focused, they just need to work on other things and not try to re-invent solutions to solved problems.
i know we all like to pretend our meticulously engineered button and drop shadow animations are actually moving a needle, but you're optimizing the last few percent at that point. most saas FE devs should be solving other problems like the UX and performance and not worry about more creative landing pages.
Comment by uproarchat 5 days ago
Comment by nyxtom 5 days ago
Comment by jvidalv 5 days ago
https://berrus.app/ (game) https://josepvidal.dev/ (my site) https://fescims.com/ (mountaineering community)
Even my mobile app for the mountaineering community is tailwind (Yes, there is Tailwind for ReactNative): https://apps.apple.com/us/app/cims-mountain-challenges/id674...
My point being, quick AI slop landing pages and products will share the same vibes, but at the end Tailwind is just a collection of css classnames, allowing you to build and create as much as cool and unique pages as with plain css if you put the effort.
Comment by WreckItRob 5 days ago
Comment by saberience 5 days ago
Comment by tosh 4 days ago
the problem is not tailwind, the model output just reflects the training material that most likely overindexed on tailwind templates with lots of fonts and text sizes and outlines, I'm sure future training runs will be better
Comment by dudeWithAMood 5 days ago
Comment by crowcroft 5 days ago
If Tailwind didn't exist people would just be writing the same article about {{ insert most common css tool here }}
Most people create generic similar looking websites, and most people that making a new website today use Tailwind. Correlation is not causation, and linking the two in any meaningful way is just a pointless discussion.
Comment by crooked-v 5 days ago
Everything else is just people using a default configuration instead of building their own.
Comment by decremental 5 days ago