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

61–70 of 125 posts

Re: Tailwind CSS marketing and misinformation engine

#61

Post by unculture »

tipiirai wrote: post #4
MichaelMug wrote: post #3

Earlier quoted context omitted.

I share your sentiment and position on Tailwind. My first introduction to programming was in 2003 as a 10 year old with HTML CSS and PHP. I think we will see Tailwind, like other frontend tech, fade into the sea of choices. If I had to summarize this I'd say don't fall victim to hype cycle and marketing. Make technical choices based on the problems. I've worked on teams where CSS was a mysterious language with many g…

I can also see how Tailwind can help teams that just want to move forward by copy/pasting ready-made components without ever looking "under the hood". However, I wrote this article for the love of CSS, web standards, and the web in general. I think Tailwind's dishonest marketing tactics aren't doing good for the development community. Especially for young developers who are suddenly told that things like separation o…

You really need to cut out these accusations of dishonesty - it’s a bad look.

He’s not saying “separation of concerns and good naming practices” are bad things, he’s saying that separation of concerns between HTML and CSS is mostly a false separation (it’s the same concern - making the UI look right) and that good naming practices are hard - best just do that in one place, the component that address the concern with both style and structure.

Re: Tailwind CSS marketing and misinformation engine

#62

Post by Timon3 »

unculture wrote: post #50

Option 1: Find a visual error, open devtools, find the nearest most descriptive class or id (.primary? Oh no…), open IDE, global search in styles folder structure (most likely but not the only place to find CSS) for “.primary”. 40 files returned. After 15 minutes find a file that looks like it might be the right one. 10 minutes to understand the CSS (lots of advanced CSS in here…). Find the cause of the visual error,…

This is exactly my experience as well. CSS in bigger codebases becomes unmanagable pretty quickly, and making small changes can become a big pain point. Tailwind doesn't completely solve this problem, but it absolutely improves it by reducing the distance between related concepts - and that's always a good thing.

Re: Tailwind CSS marketing and misinformation engine

#63

Post by solid_fuel »

jacurtis wrote: post #17

I have no idea how tailwind has gotten so popular. Tailwind is a way to justify writing inline css in our HTML. This was once considered the cardinal sin of a frontend developer. You avoided inline-css at all costs. But now Tailwind just makes a class for text-color-blue which simply abstracts the `text-color: blue;` css property away into its own class. But don't fool yourself, you are just writing inline css by a d…

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 when I want to change how my site's Buttons look or behave, I only have to look in the `button.ex` file, instead of tracking down the relevant button classes in a mess of CSS files.

Tailwind is not a good solution if you're writing something for CSS Zen Garden or a my_blog.html type website. Of course the repetition will render it an unreadable mess. But it is a wonderful solution when you have a framework generating the HTML for you.

Re: Tailwind CSS marketing and misinformation engine

#64

Post by tipiirai »

unculture wrote: post #53
tipiirai wrote: post #49

Earlier quoted context omitted.

And you still need 60+ lines to create a button like that?

Come on - your turn. Come back with your version of that Catalyst button that does everything that’s being done by those Tailwind styles.

I've written an entire article that about Tailwind's "don't clean things up" attitude:

https://nuejs.org/blog/tailwind-vs-semantic-css/

The bloat takes several forms

1. The amount of source HTML/CSS needed

2. The code complexity (class & DIV/SPAN "soup")

3. The weight of CSS & JS on the resulting website

Happy to write a comparison to Calypso, which is on a whole new level. Betting 10-20x bloat differences to semantic CSS.

Re: Tailwind CSS marketing and misinformation engine

#65

Post by tipiirai »

M4v3R wrote: post #56
meowtimemania wrote: post #37

Earlier quoted context omitted.

Ideally we shouldn’t have to name things that are never reused. Often class names are only ever used once. There isn’t much benefit in naming the class.

Yeah, this is exactly my point. I still need to name my reusable components, but I don’t need to name every single html element I want to style.

You only need to name the top-level element. Others can be styled with CSS selectors. Nesting is supported with Lightning CSS today.

Re: Tailwind CSS marketing and misinformation engine

#66

Post by lawn »

solid_fuel wrote: post #63
jacurtis wrote: post #17

I have no idea how tailwind has gotten so popular. Tailwind is a way to justify writing inline css in our HTML. This was once considered the cardinal sin of a frontend developer. You avoided inline-css at all costs. But now Tailwind just makes a class for text-color-blue which simply abstracts the `text-color: blue;` css property away into its own class. But don't fool yourself, you are just writing inline css by a d…

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.

Re: Tailwind CSS marketing and misinformation engine

#67

Post by miragecraft »

porker wrote: post #34
jacurtis wrote: post #17

I have no idea how tailwind has gotten so popular. Tailwind is a way to justify writing inline css in our HTML. This was once considered the cardinal sin of a frontend developer. You avoided inline-css at all costs. But now Tailwind just makes a class for text-color-blue which simply abstracts the `text-color: blue;` css property away into its own class. But don't fool yourself, you are just writing inline css by a d…

Hey, I'm old enough to have learned CSS from CSS Zen Garden! The one thing I appreciate from Tailwind CSS and I'd like to see added to CSS itself is that I don't have to write media queries everywhere. Nothing destroys the readability of my CSS more than adding multiple media queries to adjust styling for different screen sizes. I wrote a component that used CSS Grid and needed to vary the layout as it resized, and o…

You can hack together responsive properties using the space toggle technique.

https://miragecraft.com/blog/responsive-css-properties

This is what I use for my own site.

Re: Tailwind CSS marketing and misinformation engine

#68

Post by lawn »

tipiirai wrote: post #64
unculture wrote: post #53

Earlier quoted context omitted.

Come on - your turn. Come back with your version of that Catalyst button that does everything that’s being done by those Tailwind styles.

I've written an entire article that about Tailwind's "don't clean things up" attitude: https://nuejs.org/blog/tailwind-vs-semantic-css/ The bloat takes several forms 1. The amount of source HTML/CSS needed 2. The code complexity (class & DIV/SPAN "soup") 3. The weight of CSS & JS on the resulting website Happy to write a comparison to Calypso, which is on a whole new level. Betting 10-20x bloat differences to semanti…

Both this and the post you linked are great.

I do think it would be great to make a follow-up post on Calypso, even if only on the button. Looking forward to it.

Re: Tailwind CSS marketing and misinformation engine

#70

Post by ofcourseyoudo »

I don't know if I've ever encountered any technology that has more "even though you like using it, you shouldn't be" energy directed at it than Tailwind.

Tailwind didn't win because of marketing... it's marketing was no better or worse than the million other new products that show up in a developer's feeds every 22 hours.

Lots and lots of people like using it. That's the whole story.

Post reply on HN