9 ms·
Tailwind Isn't for Me
- karol 3y agoShip a product > Truly master the ancient art of CSS
- weinzierl 3y agoThis from 2021. No criticism, it is a good post. I was just confused at first and only realized it when I came about the part mentioning the JIT. This is a hill I will die on: Blog posts should have a date at the top.
- SushiHippie 3y agoAnd the HN title should include (2021)
- Ennea 3y agoI will be sharing that hill with you, if you don't mind.
- geek_at 3y agoEspecially in the HTMX community I'm alwayws wondering why people are chosing Tailwind. I tried it too and had the same problems as stated in the article. Mainly that its polluting the HTML so much. I went the opposite route and am using PicoCSS now which works with semantic tags and can even work without any classes. Feels much cleaner
- jack_riminton 3y agoLocality of Behaviour: "The behaviour of a unit of code should be as obvious as possible by looking only at that unit of code" https://htmx.org/essays/locality-of-behaviour/ https://htmx.org/essays/locality-of-behaviour/ Some people want "cleaner" and that's fine, I much prefer things to be "right there" as much as possible. Must be how my brain works
- klysm 3y agoUnfortunately it’s a little more complicated than locality of behavior because there is a trade off with duplication and consistency of behavior
- jack_riminton 3y agoWell sure, you can make anything as complicated as you want it to be
- timeon 3y agoAlso known as spaghetti code.
- lenkite 3y agoThis - the burden of affixing and naming the hundreds of pieces of composite styling consisting of 30+ tailwind classes is fully moved to the poor guy who needs to read, grok and maintain the code that the original author was too lazy to care about.
- jack_riminton 3y ago
- yellow_lead 3y agoAs someone who used to make websites in the myspace days (and has about that much experience with web dev, plus a few static client sites from high school), I gave tailwind a try for my most recent project. I think it saves me a bit of time, and it's easier to get a decent aesthetic quickly. That said, I don't feel it's strictly necessary, and I don't like the HTML bloating either. It makes me want to create classes, at which point it wouldn't be necessary to use tailwind anymore. The author says this about using @apply: > Therefore, it’s simply the truth that CSS files built for Tailwind are non-standard (aka proprietary) and fundamentally incompatible with all other CSS frameworks and tooling. Once you go Tailwind, you can never leave. How true is this? At worst you could use your output.css and at best I'd expect an automated tool that could do this conversion.
- fakedang 3y agoImo, it's correct, assuming there isn't an automated conversion tool. Moreover, Tailwind has a bunch of confusing class names, and certain limitations (as in classes not being available).
- ipsum2 3y agoDid you see that the person who wrote the article also created https://www.vanillabreeze.dev/ https://www.vanillabreeze.dev/ to remove dependencies from Tailwind?
- yellow_lead 3y agoGood to know!
- patatino 3y agoI feel the same about javascript: "I think the folks building Tailwind are talented and nice people. But at a pure technical level, I simply don't like Tailwind. Whoever it was built for, it was not built for me."
- eithed 3y agoWhat would you suggest as an alternative to enable rich web applications?
- omer_balyali 3y agoTailwind is just a way of writing/architecting CSS. There is nothing in it that "enables" rich web applications which browsers doesn't let you do with (vanilla) CSS, at the end it's just using CSS under the hood (utility classes). And CSS is not the alternative to Tailwind; there are numerous ways to write/architect CSS and Tailwind is just one of them, very opinionated and rigid that you should follow it's way of doing it. But you don't need any specific tool to write CSS, that's the point of the article. Instead of learning/memorising CSS properties and values, you learn and memorise Tailwind classes which are just abstractions to regular CSS properties and values and you need to write them inside class tags. I think the lure of Tailwind comes from IDE integrations and its documentation. But it doesn't add any "new features" that enables rich web applications which CSS lacks in anyways.
- eithed 3y agoPlease reread my comment per OP referring to JS, not Tailwind :)
- patatino 3y agoI am a .net guy and had to write react for over six years daily, combined with c#, so I got pretty decent at it. Even did some sideprojects with react. Recently, I started a new project for work with Blazor, and I felt at home again. It was weird, just a relief to work with what I know best. I'm not saying Blazor is good or you should use it, but for me, coding was fun again. I truly hope I do not have to work a lot with JavaScript ever again. I just do not enjoy it. Maybe I have to go to full backend after so many years of full stack.
- jwilber 3y agoIf you have tendinitis/RSI/carpal tunnel I cannot stress enough how much worse it feels writing tailwind versus regular css.
- sureglymop 3y agoI'd actually love a tool that converts tailwind CSS to regular CSS on save because my biggest issue with CSS is that I constantly have to come up with ids and class names.
- onion2k 3y agoTailwind to CSS: https://tailwind-to-css.vercel.app/ https://tailwind-to-css.vercel.app/ CSS to Tailwind: https://transform.tools/css-to-tailwind https://transform.tools/css-to-tailwind
- khalby786 3y agohttps://www.vanillabreeze.dev/ https://www.vanillabreeze.dev/ (by the author of this post)
- TekMol 3y agoPeople want painkillers, not vitamins. That's why there is this endless flow of snake oil frameworks like Tailwind and all the others. People see some fancy demos and think "wow, so cool so easy" and "This is the newest framework, so it must be the best" and go for it. Then over time, they get caught in a web of problems that the complexity of the framework produces. Then a few people go for the vitamins route (plain html+css+js) and most go for the next painkiller on the market.
- nomilk 3y agoIn your analogy, wouldn't tailwind be more of a multivitamin, in that it contains a bunch CSS classes (vitamins) conveniently packaged and ready to go? I haven't used tw yet, but I intend to because I was blown away by how much sense the authors' book Refactoring UI made.
- TekMol 3y agoTaking multivitamins is usually the wrong approach. So they are indeed a kind of snake oil. Which condition do you intend to treat by taking multivitamins? Have you looked at randomized controlled studies and found that they support your idea that taking MVs has a positive effect on that condition? Have you got your bloodwork done? Did the doctor then suggest that based on your situation MVs are the right approach? I never have heard of such a thing happening. So yeah, TW and MVs are similar. Both appeal to people who think "Hey, why do the work and figure things out and act appropriately? I can just swallow this magic pill!".
- PrimeMcFly 3y ago> Taking multivitamins is usually the wrong approach. So they are indeed a kind of snake oil. Not true at all. It ensures people get needed nutrients when they have shitty diets. It's not snakeoil at all.
- mcny 3y agoThis was my experience as well. I talked to three different doctors in two different states and they were all lukewarm at best about multivitamins when I mentioned them. "It won't hurt anything" was about the best I got from one of them.
- troupo 3y agoYeah, it isn't Tailwind that doesn't support web components. It's Shadow DOM that is such a bad abstraction that it breaks the web in innumerable ways and need dozens of new standards to fix its shortcomings.[1] And yeah. That <fancy-component> that is seemingly not an eyesore? It's not because Tailwind is bad and "pollutes HTML". It's because web components hide any and all ugliness from you so that you can pretend they are beautiful. Because in the end there's literally nothing on the web but divs and spans [1] From web component report by people making them: https://w3c.github.io/webcomponents-cg/2022.html https://w3c.github.io/webcomponents-cg/2022.html It's worth noting that many of these pain points are directly related to Shadow DOM's encapsulation. While there are many benefits to some types of widely shared components to strong encapsulation, the friction of strong encapsulation has prevented most developers from adopting Shadow DOM, to the point of there being alternate proposals for style scoping that don't use Shadow DOM. We urge browser vendors to recognize these barriers and work to make Shadow DOM more usable by more developers.
- jamiedumont 3y agoI'd like to like web components, but their reliance on JS to instantiate along with all the chaos of the shadow DOM keep them off the table for me. I think they are a great concept defeated by the implementation.
- gryzzly 3y agogoogle "html web components"
- jamiedumont 3y agoThey still rely on JS to instantiate though unless I've misinterpreted?
- gryzzly 3y agothe point of them is that you are providing full proper HTML and CSS so client-side stuff kicks in only when it can and needs to be kicked in.
- PUSH_AX 3y agoI love tailwind. I strongly feel that most modern CSS solutions are massively overthought. In engineering we have bigger problems to solve than a key/value list that makes a div blue. Tailwind removes the thinking around CSS, naming, preprocessors etc etc, it just lets me write good CSS and focus on components and other engineering problems. I seem to be one of the few people who can read CSS properties horizontally as well as vertically, so I'm all good on most peoples major complaint.
- timeon 3y ago> most modern CSS solutions are massively overthought Example is Tailwind. Which in the end is same as inline CSS.
- PUSH_AX 3y agoThis is false and people need to stop parroting it.. Inline styles have high specificity and are often the culprit of specificity clashes. Inline styles don't follow a design/theme, tailwind has sensible defaults for spacing/colours and consistency etc. Inline styles are even more verbose than a tailwind class list. Tailwind has responsive classes out of the box. Inline styles don't really support pseudo classes....
- tipiirai 3y agoCurious: which modern CSS solutions are you referring to?
- dbbk 3y ago
- globular-toast 3y agoTailwind is an abomination. Of course it's easier to use. Pressing the bold button in MS Word is easier than setting up styles etc, but one makes it easy to create an impossible to maintain mess that could have been made by a primary schooler, and one makes it possible to create a consistent style that looks professional. The only reason I think Tailwind is becoming popular now is it's exposing a bunch of things like rounded corners and drop shadows that are still cool but unlike Bootstrap you can slightly tweak your rounded corners easily. It'll still lead to everything looking the same, then people will probably ditch it and go back to really minimalist styles like HN to look cool again.
- mablopoule 3y agoI really dislike tailwind too, but I think there is lot of value for lots of people in the idea of having all the styles contained with the template and thus making copy-pasting of code easier without having to deal with the pesky 'Cascade' part of CSS. Personnaly, I love the cascading part when used correctly, along with the 'latest' evolution of CSS such as 'calc()', variables, on top of using CSS selectors.
- globular-toast 3y agoInline CSS already lets you have the styles in the template.
- hmcq6 3y agoTailwind is opinionated, meaning it encourages a structure that helps devs avoid common potholes. You may not like its choices but saying it creates a mess has been the opposite of my experience. One of the main pitfalls I have noticed no longer running into is that the structure tailwind encourages prevents issues with CSS selector specificity. As a result I’ve definitely noticed fewer instances of ‘!important’ in code review.
- globular-toast 3y agoYou could instead learn what patterns should be avoided and why. This means you can make meaningful judgements on whether it's ok to use those tools on occasion (like goto in C). Tailwind is a mess by default. People didn't invent separation of style and content for no reason. They did it because what they were doing before was as mess. This is that same mess.
- mapreduce 3y ago> We live in a world where custom elements (aka <whatever-you-can-dream-of>) are fully supported and enabled by modern browsers. Don't we need to define the custom element <whatever-you-can-dream-of> using javascript first? All my knowledge about custom elements comes from this Mozilla doc: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements https://developer.mozilla.org/en-US/docs/Web/API/Web_compone... If custom elements is the way to go, it sounds like a lot of javascript and coding overhead that I have to take. Doesn't it?
- efilife 3y agoYou can use custom tags just like any other native tags without any js, they just work
- d_k_f 3y agoDepends on what you're going to use them for. If you need the actual JS functionality web components can offer, then yes. Though at this point you're in JS land anyways and probably using some kind of web component library (or your custom-built helpers/wrappers/etc.), which usually handles this for you. If all you want to do is prevent the "div/span-tag soup" as he calls it, you don't have to register anything, though. You can just write <ui-card><ui-card-header>My header</ui-card-header></ui-card> and style that using regular CSS à la ui-card { background-color: red; }.
- troupo 3y agoYou... Can't. You literally cannot define a custom element without Javascript.
- globular-toast 3y agoYou don't have to define it, though. Browsers are supposed to just put unknown elements in the DOM and style them like any other element, using CSS.
- 3y ago
- miohtama 3y agoI use Svelte for frontend develoment, and used all of JS frameworks that came before it. It's very web component'y. I feel Tailwind was partially created by the problems rising from the bad design choices of many modern web frameworks. In Svelte, There is less need to use Tailwind, because HTML, CSS and JS (or TS) are all encapsulated in a single source file. Editing CSS alongside the HTML is easier than bloating the HTML with a class hell. You can use native syntax highlighting, IntelliSense, early compiler error catching and linting plugins of your editor.
- tipiirai 3y agoI'm with the author. I love vanilla CSS. With a well-thought, cascading structure you get the benefits of both global and local CSS.
- mablopoule 3y agoExactly. I had the luck of working with a codebase that knew how to harvest the power of vanilla CSS (though vanilla CSS in 2020 was already the same as vanilla CSS in 2014), and it's quite powerful. Add to that the browser devtools and it can be very productive.
- deanc 3y agoThe endless roundabout of discourse on which technology choice you should or shouldn’t make is exhausting. As a senior engineer im able to sift through the bullshit on this but as a junior I remember these discussions were draining and also made me feel like shit about decisions I’d made. I guess it drills into a part of human nature where we are always measuring ourselves and our things against others.
- jamiedumont 3y agoI don't feel that a simple upvote is enough to express my support for this statement. I'll +1 this all the way to retirement! Technology-choice as fashion needs to die. There are suitable tools for the job, and unsuitable ones. Deciding between them gets harder when loads of amped up juniors are selling each other on the benefits of the latest and greatest without actually putting them to the test over the course of years/multiple projects/iterations.
- 9dev 3y agoI can't understand why people bother about HTML with long class attributes so much. If you use "btn" instead of a long string of Tailwind classes, you just move the actual CSS properties into a stylesheet file, which you need to switch back and forth to just to change the looks of that button. And having said that, when using Tailwind with some kind of component-centred framework, those classes will be local to a <Button> component anyway, which is exactly the same as some kind of custom component the author praises (that also needs styles within.)
- omer_balyali 3y agoIf you need to adopt the HTML to fit a certain style, you're doing it wrong. HTML should be a semantic markup, it shouldn't change much when you need to change the styling/CSS. So you don't really go "back-and-forth" to architecture CSS, you just write your CSS. But maybe it's a Tailwind thing that you need to add additional elements to HTML just to be able to style it correctly, I'm not sure. It's like saying you shouldn't have JSON files (and embed the data inside the business logic) as you need to change the JSON file when you need to change the logic of the app. In short, you adopt your CSS architecture to your semantic markup, not the other way around.
- 9dev 3y agoI don't know about you, but I've never seen anyone create a user interface by writing down the full, semantic markup, and then proceed to create CSS for that finished HTML structure. Instead, it's usually an iterative process of adding HTML, styling that, then adding more content. That isn't even related to Tailwind, or any other CSS framework -- just that Tailwind allows you to stay in the HTML (or component) context, without having to switch to a stylesheet there. Your JSON comparison doesn't fit: We're talking about styling, not business logic. But if you mean that I would need to define `"userAgeOver21": true` in a JSON file instead of having some `{{ %if user.age > 21 }}` in the code, then yes, I'm firmly in the latter camp. Not having to switch context often overrules pedantic purity every time.
- ricardobeat 3y ago
- SebastianKra 3y agoDecent arguments. Ultimately, I think your preference comes down to: - Do you care about how your html output looks? - I personally don't, just like I don't care about what my Webpack bundle looks like. Web standards will always be slower to evolve, which is why we build tooling on top. - How do you think web components will be used? - I believe they will be used sparsely, only by libraries. But if you want to replace your frontend framework (I currently don't see why), Tailwind will not work. We've opted to work with CSS Modules (which give you many of the Shadow-DOM advantages), but I would be lying if I didn't see the appeal of Tailwind every day. For me, it's the redundancy of having to give semantic names to elements that are already described by their React component names. Tangentially, developers often are tempted to use classes for things that should be components. CSS classes must not be used for code reuse on a large scale, because CSS and HTML are bidirectionally coupled and you will end up search-replacing large sections of html because the design team wanted the text to align in a way that is somehow impossible without adding a div.
- PrimeMcFly 3y ago> Web standards will always be slower, which is why we build tooling on top. I don't follow. I don't see how frameworks or tools have anything to do with standards being slow.
- SebastianKra 3y ago* Slow to evolve As in: it took years to get something thats even remotely comparable to framework components. Tooling can move fast and course correct, the standards have to get things right the first time.
- PrimeMcFly 3y agoI still don't see the relationship. Framework components are using the standard to create what they create, and that's how it's meant to be. I wouldn't expect the standard to ever really offer most of what a framework does.
- 3y ago
- ecmascript 3y agoI hated tailwind with a passion at first glance. I thought it looked horrible and while it still does, I decided I don't care. After a while of using Tailwind at work, I have started to love it. It it just so much more productive and I rarely need to step into css-land anymore. You still need to know and understand how CSS works in order to get the most out of Tailwind. Tailwind is just like CSS but with shortcuts ready there for you to use.
- bradhe 3y agoMan. It's 2024 and we're still talking about ugly-ass HTML. That's amazing.
- jamiedumont 3y agoHTML itself is beautiful. Show me a better way to express varied words and images with an eye for creative layout and design the way great books play with this content. Every design system build on top of HTML is just an abstraction that adds layers of complexity whilst reducing the inherent flexibility of HTML. It's much like the years when every SPA framework rebuilt the concept of a back-button and page history, or standard HTML form inputs. All were shittier versions of what the browser provided (even if imperfectly at times).
- MichaelMug 3y agoMost of the devs I've encountered that really like Tailwind have their focus more in the realm of development and engineering of a whole system where the UI is a means to an end. They are not deeply focused into the nuances of user interface design. I can understand and appreciate what Tailwind is all about. It's a standards approach to naming conventions and puts all the details in the markup. Which has its value. I've found a happy balance to be: 1. utility classes for layout and structural details 2. custom classes for look/feel details 3. after x utility classes, its time to combine into a single class x is very much based on situation and intuition not a hard rule. I'm still using LESS because of nested css, and classes can be composed. One benefit of LESS is the style code is decoupled from react/angular components and more importantly the shadow dom.
- gryzzly 3y agoit’s ok for putting something together quickly and it’s a garbage tool for maintenance - I feel unfortunate having inherited a codebase with Tailwind.
- Lucasoato 3y agoDisclaimer: I’m extremely newbie in front end, probably less than 6 months of experience combined in the last 6 years. I can’t stress enough how easy it is using Tailwind, it just works! I don’t care about the long ass lines because for how I’m used to format html pages, I’d have to go to a new line anyway, it’s just that now I can understand what’s happening in react components without too many troubles. Another plus is that by checking other people’s html code, I can immediately see their tailwind tags, without searching through files for css definitions, I see how they change their stuff there and I can immediately learn how to replicate their patterns. Imagine how fruitful saving time is, especially when using framework like nextjs, you can literally launch a prototype in few days of work with these technologies. Don’t get me wrong, I know that you’re not going to build the next Facebook or Microsoft with Tailwind and Nextjs, they have their drawbacks, but their impact on the critical path from the idea to a working MVP can’t be ignored.
- gryzzly 3y agoyeah, it works, but try getting back to this codebase in 3 months and then refactor something small. worse, it’s someone else who will have to do it after you.
- lenkite 3y agoI don't quite get the hate for having CSS in another file. Do you also put all your react stuff in one single file ? That same logic and argument can be applied against all modularization. And really 20-50 tailwind classes in a single element is VERY hard to read and keep in mind. No - it does not make things clear or understandable. One tends to need to re-read and scan over from the beginning and eyes glaze over. Esp if some elements only vary with a few classes missing. I guess it works for people with very high attention to detail and high amount of working memory. I only find it personally frustrating. With a CSS class applied to that component, one at-least has a singular NAME to refer to that piece of composite styling and your memory can be used for other matters. Maybe tailwind css works well for some bright, big-memory developers. I did try it for a couple of projects, including needing to maintain someone else's tailwind project - and only felt stupendous pain. However, the "atomic css" philosophy behind tailwind is great. I find frameworks like https://open-props.style/ https://open-props.style/ a far better application of that principle.
- ryukoposting 3y agoAs a non-web developer with a couple of relatively sophisticated side projects, I've never understood the appeal of Tailwind. It somehow manages to be hideous, verbose, and absolute gibberish all at the same time. If I wanted that, I'd write everything straight into the style tag. I can't understand why Tailwind would be any easier to maintain (and I'm sorry, but you will never convince me that I need a javascript precompiler for my damn stylesheets).
- usrbinbash 3y ago> The problem is that all these tokens are defined…in JavaScript. A CSS framework. Using JavaScript for its design tokens. In 2021. And THAT right there is the core problem of such frameworks. The trinity of frontend technologies, by design, have a clear separation of concerns: HTML structures, CSS styles, JS implements logic. Of these 3, JS is, by necessity, the most powerful, and the one that can change the other 2 the most. So, as programmers like doing cool things, the temptation is always there to just write some JS that grabs the other 2 and does whatever with them. This would, in theory, be fine...if there was a universally agreed way to do this. The problem is, there isn't. We still pretend, and can even implement it in a way, where the concerns are actually separated (thanks to serverside rendering we can even do so dynamically), and we have not one method of violating this separation of concerns, but a gazillion ways, spanning the full range of compatibility from "no problemo" to "are you crazy?". This needs to stop, I say desperately, while being fully consciouss of the fact that it never will, since the genie is already out of the bottle and has been for a long time.
- ChrisArchitect 3y ago(2021)
- mmargerum 3y agoSeems like you can quickly build out what you want in tailwind and then convert to css using an ai tool