Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Tailwind CSS marketing and misinformation engine

nuejs.org

Post reply on HN
Print view View original

81–90 of 125 posts

Re: Tailwind CSS marketing and misinformation engine

#81

Post by jonwinstanley »

tipiirai wrote: post #25
M4v3R wrote: post #13

Like many I was initially skeptical of Tailwind because I thought it made the code look “ugly”. But then I started using and almost immediately noticed the productivity boost. Two things that I noticed while using it was 1) I never knew how much I disliked naming things before I didn’t need to do that anymore and 2) how big of a mental burden it was to keep the mapping between the id/classes and the CSS, not mentioni…

Naming things is notoriously hard, but it's a skill you need to master to make reusable things. You name things that repeat. Think of function names in JavaScript, class names in object-oriented languages, or component names in Figma.

Tailwind lets you stick to just naming your components, don't bother trying to give names to all the re-usable sets of styles

Re: Tailwind CSS marketing and misinformation engine

#82

Post by can3p »

I think tailwind went a bit too far, but in general it’s really hard to have a controllable amount of css on huge projects. The reason is that selectors are often too broad and it’s not possible to say in general whether a particular selector is being used or not.

Atomic classes really shine in this aspect, since it’s really just what you have in html and nothing more.

Another fantastic quality is the fact that you can really tweak things slightly in the html and skip inventing a modifier class just for this particular situation.

I think bootstrap css hits a really sweet spot there, since they have lots of reusable components, which are very easy to use and extend and a huge bunch of utility classes to accommodate for exceptions. I know that’s not an argument for spas, since you have components there, but for server side templates that’s the best

Re: Tailwind CSS marketing and misinformation engine

#83

Post by fabiospampinato »

M4v3R wrote: post #13

Like many I was initially skeptical of Tailwind because I thought it made the code look “ugly”. But then I started using and almost immediately noticed the productivity boost. Two things that I noticed while using it was 1) I never knew how much I disliked naming things before I didn’t need to do that anymore and 2) how big of a mental burden it was to keep the mapping between the id/classes and the CSS, not mentioni…

> 1) I never knew how much I disliked naming things before I didn’t need to do that anymore

I never understood this argument about naming. You need to name the component anyway just to be able to reference it somewhere? You need to give the folder or the file where this component is defined a unique name anyway? Internal nodes technically don't need to be named when using Tailwind, but if for example I'm writing a Slider component, do I not want to name the "handle" thing that can be dragged anyway? How was finding the "handle" word a non-insignificant hurdle? And if I need to talk about this element with a colleague what would you call it anyway?

Re: Tailwind CSS marketing and misinformation engine

#84

Post by MrJohz »

lawn wrote: post #66
solid_fuel wrote: post #63

Earlier quoted context omitted.

I think the divide here is whether or not your stack includes the concept of components. I think it's perfectly maintainable to write `class="rounded button hover:bg-color-black-700 bg-color-black-400 active:bg-color-black-500 focus:bg-color-black-500 rounded-sm text-sm text-color-gray-300"` because I only write it once, in my Button component. Then everywhere else, I just write ` Inner Text `. The key difference is…

> because I only write it once, in my Button component. Unless of course you have several similar buttons with only minor differences between them. Maybe copy-paste? And then you have to slightly tweak your buttons... Or add conditional effects or dark mode and the complexity explodes, just on a simple button.

The same is true of CSS classes, though - there you have the same choice between reuse and duplication. Do you have .button-primary, .button-secondary, etc, or do you use modifiers instead? The combinatorial complexity is inherent in the design of these sorts of components, you won't get away from it just by using a different tool to write your styles.

Re: Tailwind CSS marketing and misinformation engine

#86

Post by diob »

jacurtis wrote: post #10
diob wrote: post #5

Meh, tailwind is the most maintainable and easy to understand way of doing style I've experienced (from solo to massive teams). Been doing this for around 13 years, so plenty of time to try a lot of flavors of styling. I'm so glad I no longer have to wonder what primary means, let alone the other weird names people come up with for classes. And if you don't want to see the classes, just write it out into a reusable c…

> I no longer have to wonder what primary means The point is exactly that you don't need to worry about styling in the HTML. You just structure the HTML. If you want to know what primary means that you open the css file and search .primary and see all the css properties right there. It was never rocket science. The HTML was designed to be the structure of the site. So you can designate items as buttons, primary butto…

I don't think I'm going to change your mind since you're fairly convinced of the ideological / purity standpoints. But folks have tried that stuff for years. It didn't scale, or end up maintainable. So they invented systems to try and help, like BEM or less.

I don't understand why you think this is like "building a boat to cross a puddle". Folks have struggled with this since the dawn of the web. It's hard.

Most of us aren't crossing puddles, we're trying to cross oceans with gigantic diverse teams.

Re: Tailwind CSS marketing and misinformation engine

#87

Post by ofrzeta »

fabiospampinato wrote: post #83
M4v3R wrote: post #13

Like many I was initially skeptical of Tailwind because I thought it made the code look “ugly”. But then I started using and almost immediately noticed the productivity boost. Two things that I noticed while using it was 1) I never knew how much I disliked naming things before I didn’t need to do that anymore and 2) how big of a mental burden it was to keep the mapping between the id/classes and the CSS, not mentioni…

> 1) I never knew how much I disliked naming things before I didn’t need to do that anymore I never understood this argument about naming. You need to name the component anyway just to be able to reference it somewhere? You need to give the folder or the file where this component is defined a unique name anyway? Internal nodes technically don't need to be named when using Tailwind, but if for example I'm writing a Sl…

For testing you usually need a name or "id" or, if using Playwright, a "data-testid" attribute :)

Re: Tailwind CSS marketing and misinformation engine

#88

Post by DannyBee »

tipiirai wrote: post #2

Author here: This is probably the most important content piece I've ever written. Curious to hear your thoughts. Thank you!

Advice from a professional arguer:

You seem to deliberately not present tailwinds strongest arguments. For example, you claim their is no next step to abstraction, but literally in the paragraphs before the ones you quoted they say to build reusable html+css components instead of trying to make css only abstractions. Which very clearly responds to your argument and complaint.

There are other places in your writing like this.

It's fine to think and claim they are wrong. But it would be a lot more persuasive if you take them at their best and knock them down, instead of being selective.

Overall take their absolute best case scenarios and reasons and show why you are still right.

Re: Tailwind CSS marketing and misinformation engine

#89

Post by JLehtinen »

sktrdie wrote: post #74

"At some point, hundreds of utilities later, the code you've written doesn't look pretty." Personally I find diving through a bloat of identifiable tailwind classes allows me to review/change/adapt/create UI code MUCH QUICKER than having to re-learn some other abstraction or naming convention that some other developer came up with. Complaining that lots of Tailwind classes "don't look pretty" makes me think the autho…

I’ve worked on some large projects including refactors with Tailwind and my view is opposite. I can see how Tailwind would work on small projects, or ones where the designer never touches the styling inside the code. But on the other hand, avoiding naming because it’s hard isn’t how I approach organising design, and it doesn’t sound like a good approach to coding either. But I can see how there may be a need to bypass it in projects where there is no designer, or a design system.

Re: Tailwind CSS marketing and misinformation engine

#90

Post by oxidant »

tipiirai wrote: post #21
oxidant wrote: post #18

One thing I would like to see is a re-implementation of the button in your style of CSS to strengthen your position. I'm not siding with either approach, I just think it would make the article better. Your, "don't make things cleaner"/"make clean things", images show part of the Tailwind classes used to make the black button on one side and the class "primary" on the other. Elsewhere in the article you define "primar…

Hey. Thanks for the comment. I could add that, but wanted to focus on the title of the article: the technological origin, vendor lock-in, and their messaging scheme. I have written a different article about Tailwind vs semantic CSS, which compares the amount of code needed to implement the same thing and how the resulting site is order of magnitude smaller with the semantic approach: https://nuejs.org/blog/tailwind-v…

I think it's important to add to the article. Like I said, the one bit of CSS you added is nowhere near the functionality of the Tailwind example you were comparing it to. Without an apples to apples comparison showing _how_ Tailwind should've done it, your words have less power.

---

I read your other article and it still feels superficial and missing details. You compare a demo of a commercially available (effectively "closed source") template against a page you built, but don't provide the source for the page you built. Apologies if it's in the article, but I couldn't find it. I did find the simple blog template on the Nue site, but it had considerably less functionality than the Tailwind demo.

It's still not an apples to apples comparison, because you're comparing a site built with Nextjs to whatever you built. Of course static HTML without JavaScript is going to load faster than an SSG site.

I think the ending quote in the second article is completely unrelated to Tailwind and I'm not sure why it was your conclusion.

> The fact is that Tailwind's popularity will eventually fade. CSS-in-JS is trending now, but standards are forever.

Tailwind isn't CSS-in-JS. You don't need a build step to write it. You need a build step for important features like tree shaking and dynamic properties, but it's not CSS-in-JS.

Including that hurts your position because it sounds like you don't understand what you're arguing against.

Lastly, why so much hate against Tailwind? Positioning your framework as "Nue and semantic CSS vs Tailwind" doesn't make me want to try your framework. Show me why your framework is good and let me bring my own solutions to it.

Post reply on HN