Live data from Hacker News

Tailwind vs. Semantic CSS

nuejs.org

91–100 of 211 posts

Re: Tailwind vs. Semantic CSS

#91

That example with a million div for the nav with tailwind is so ridiculous. I agree with the conclusion but that first example is so grotesque that it made me discard the whole article One other advantage of tailwind is that it makes it easier to work collaboratively with people of different css level and it requires less review, less possible side effect. But it's clear to me that clean semantic well developed css i…

It's an official Tailwind example…

Re: Tailwind vs. Semantic CSS

#92
post #62

The article is interesting but really feels unfair sometimes, it doesn't help: - The whole "amount of CSS" part is unfair when the Semantic CSS implementation isn't responsive at all, so of course it will be lighter, it does less. - The part about the big number of HTML elements is a bit frustrating too; tailwind doesn't require you to use more HTML tags at all. It's totally possible to redo the Semantic CSS example…

Is comparing the markup of an html page with all the style in html attributes, to an html page which imports style from a CSS file (which is not displayed) a fair comparison?

Re: Tailwind vs. Semantic CSS

#93
post #69

This article makes some bold, false claims. What is true is that Tailwind will generally result in a bigger stylesheet over the wire than if you hand-write CSS. That's a well understood trade-off, made in exchange for several benefits. But then the article suggests that every claimed benefit of Tailwind actually doesn't exist, and that Tailwind is in fact worse on all fronts. He seems genuinely to believe that there…

Author here. Please specify a falsy claim on the article and we can talk about it.

You claim that you can only move faster with Tailwind when one of these is true: when you don't care about 'badly structured' CSS, or when you are completely new to CSS, or when you don't care about reusable modules.

I care very much about the structure of the CSS files I generate with Tailwind. I have been writing CSS for over 20 years. And I care very much about reusable modules – before good composable component systems came along, CSS classes were the best solution for this, but not any more imo. And I can certainly move faster with Tailwind in most situations.

Sorry for the negativity btw, I don't want to discourage people posting about their experiences with a tool. I just doubt you have really given Tailwind a fair trial. You're obviously a seasoned front ender who understands CSS deeply, but I don't believe you have understood Tailwind properly before coming to your conclusions about it.

Re: Tailwind vs. Semantic CSS

#94
post #79
post #2

Author here. I implemented the commercial Tailwind "Spotlight" template with Semantic CSS and compared the differences in weight, amount of HTML and CSS, rendering speed, and best practices. I was surprised to find _that_ much overhead in Tailwind. Curious to hear your thoughts.

Hello, well done on your article! I have a few questions: - What exactly do you mean by "Semantic CSS"? I've never heard this terminology before (might just be OOTL). I get the parallel between this and Semantic HTML, but I guess it's not as clear what it is supposed to mean for a styling language to me. Is it just native CSS (or "pure" CSS)? At least, as a result, I have no idea what this means, or by what measures…

Thanks! Semantic CSS describes an elements meaning clearly: like , , or . Tailwind is non-semantic because you cannot say what the element does, like for example:

The links are now fixed. Thanks!

Re: Tailwind vs. Semantic CSS

#95
post #18
post #3

I find Tailwind really good for prototyping designs and iterating quickly, and as the design becomes more crystallised then I moved to semantic css and start to clean up the complexity. Once I've figure out that patterns and components required...

But who really work like this? The most people and company would not do this extra work and use tailwind for finished products too.

Agreed, even if you do a rewrite - you'd still want to use tailwind so you can re-use some of the elements you already built

Re: Tailwind vs. Semantic CSS

#96

Tailwind excels when it’s used on reusable components. Anyone handcoding Tailwind for a full page will start to hate it quickly. But you can have the best of both worlds with apply: .card { @apply p-2 rounded shadow text-gray-700; }

Exactly. Using tailwind in your views in a backend framework such as Rails/Laravel means you can build pages extremely quickly.

Re: Tailwind vs. Semantic CSS

#97
> The semantic version is smaller because it utilizes high-level, semantic components like .nav

What is the purpose of writing if you can just write ? There seems to be only one navigation element on that page, and the class isn't adding anything that is not already expressed by the tag name.

Re: Tailwind vs. Semantic CSS

#98

This is one of the first Tailwind vs * articles that isn't bad. It makes a good case in the analysis. For a lot of applications (like a blog), what the author calls "semantic CSS" is the right thing to do. But there comes a point at which it is no longer feasible. We have a long history of SMACSS, object oriented CSS, BEM, CSS Modules, scoped CSS, and now Tailwind to make it work. > Because mastering CSS requires pra…

>Similarly, I haven't seen a pattern where good CSS authors do not like Tailwind.

well I haven't used Tailwind but from the examples I've seen I would hate it, and from what I can see I would hate it for the same reason that I hate all CSS abstractions I've worked with - because they limit what I can do with CSS in the interest of making it easier for other people who are not that good with CSS to get their work done OR it will require me to do things in a particular way when I believe I know a far better way of doing them.

Now I'm not arguing I am a good CSS author, I do lack some things (like a good feel for design imperfections so I don't notice when something is off) but I am saying I am generally familiar with this behavior in devs regarding other technologies, if one is sufficiently good with a technology one dislikes restraints placed on usage by some external library.

This is why people always comment "This would be so easy if we weren't using {X} technology on top of our code" because they generally are comfortable using the lower layer that the higher layer is now controlling and preventing them from doing their work in what they see as the best way to do it.

So, all that said, I would expect that if Good CSS authors were forced to use Tailwind they would not like it. The assertion to the contrary is extremely surprising and I just don't believe it without some extremely surprising proof to back it up.

Re: Tailwind vs. Semantic CSS

#99
post #81

Earlier quoted context omitted.

Author here: - How is it not responsive? I can easily fix. - The Tailwind example is the official template made by the Tailwind developers themselves.

- compare the tailwind example and yours, they don't have the same behavior. The tailwind one has a specific mobile menu for example. And that is just one example. - sure, but since the tailwind page does more things, it's logical it has more code. Your base for comparison is production used code, sold to people. So of course it's polished, it must handle browser bugs and other things you might not expect in a quickl…

Tailwind example indeed does more, but only slightly. Would increase the size of CSS by 1-3%. The semantic version has clearly enough to prove the point the article attempts to make: significantly less code is needed and the resulting site is leaner & faster.

Re: Tailwind vs. Semantic CSS

#100

This perfectly summarizes what I've been saying. Popular tools are not the most effective ones. The people who are leading our current tech monoculture are not qualified to be making such decisions and imposing them on such large numbers of people. The artificiality of our current tech culture is obvious. It doesn't feel organic, not free market.

ditto this most tailwind projects have very wiiidddeee classnames in one line... which means I can't have split tabs on my vscode
Post reply on HN