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

Tailwind vs. Semantic CSS

nuejs.org

Post reply on HN
Print view View original

11–20 of 211 posts

Re: Tailwind vs. Semantic CSS

#11

Post by tipiirai »

Loeffelmann wrote: post #9

I don't understand why tailwind would force you to write more divs then CSS. How do selectors solve the problem of how many elements you need to use to achieve the same design?

Extra divs are wrappers that help you style the parent element to add flex layouts for example. Or why do you think the official Tailwind template has so many nested divs with utility classes?

Re: Tailwind vs. Semantic CSS

#12

Post by amjnsx »

Thanks for confirming my suspicions regarding Tailwind. Their marketing loves talking about how small the CSS file size is vs semantic, but that code still has to go somewhere - and it's a bait and switch of "smaller css" with the cost of an inflated html file

* The irony being in this article is that the CSS file is also larger

Re: Tailwind vs. Semantic CSS

#13

Post by oldnet »

I never understood why use tailwind when I can have semantic css without any extra unusable content.

Btw Bootstrapt is still there

EDIT: Semantic css is also bandwidth friendly for mobile connection.

Re: Tailwind vs. Semantic CSS

#15

Post by amjnsx »

earthnail wrote: post #7

I just moved our website from semantic to tailwind after I didn’t understand the semantic bits anymore. Main problem was: the semantic css was elegant, but understanding it again after half a year of not editing the page took super long. Tailwind is clear. The code looks uglier but I instantly know what’s going on. No hidden things. And no fear in editing a piece of html that it will break sth else. Huge upside.

> but understanding it again after half a year of not editing the page took super long.

Longer than converting the entire website to Tailwind?

Re: Tailwind vs. Semantic CSS

#16

Post by AmazingTurtle »

amjnsx wrote: post #12

Thanks for confirming my suspicions regarding Tailwind. Their marketing loves talking about how small the CSS file size is vs semantic, but that code still has to go somewhere - and it's a bait and switch of "smaller css" with the cost of an inflated html file * The irony being in this article is that the CSS file is also larger

tbf the examples brought up in the blog post omitted semantic attributes such as lang and the whole dom structure (all the divs!) and the other data- attributes just to make it look even worse. OP is severely opinionated.

Re: Tailwind vs. Semantic CSS

#17

Post by tipiirai »

earthnail wrote: post #7

I just moved our website from semantic to tailwind after I didn’t understand the semantic bits anymore. Main problem was: the semantic css was elegant, but understanding it again after half a year of not editing the page took super long. Tailwind is clear. The code looks uglier but I instantly know what’s going on. No hidden things. And no fear in editing a piece of html that it will break sth else. Huge upside.

Indeed. This is a matter of taste. I personally find semantic CSS much clearer. I move faster with it because I need less code to achieve the same thing, and the resulting site is leaner.

Re: Tailwind vs. Semantic CSS

#18

Post by progx »

k4runa wrote: 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.

Re: Tailwind vs. Semantic CSS

#19

Post by quickthrower2 »

earthnail wrote: post #7

I just moved our website from semantic to tailwind after I didn’t understand the semantic bits anymore. Main problem was: the semantic css was elegant, but understanding it again after half a year of not editing the page took super long. Tailwind is clear. The code looks uglier but I instantly know what’s going on. No hidden things. And no fear in editing a piece of html that it will break sth else. Huge upside.

Copy paste for styling isn't as bad as it sounds. Obviously with React you get components you can reuse. But manually chucking out mb-2, mx-2, my-3 to get it to look nice to the eye and having the same things repeat in different spots without a "meaning" or "semantics" can be quite nice. For small-medium size projects of course.

Re: Tailwind vs. Semantic CSS

#20

Post by progx »

reddalo wrote: post #14

I don't agree with this post at all. It seems like it's been written by someone who never actually used Tailwind CSS: I had the same doubts before using it.

The post say not that tailwind is bad, it shows only that using tailwind could end with huge code base and higher load times.
Post reply on HN