Live data from Hacker News

Vanilla JavaScript support for Tailwind Plus

tailwindcss.com

161–170 of 202 posts

Re: Vanilla JavaScript support for Tailwind Plus

#161

Lovely. Verbosity aside, now on top of knowing CSS you need to learn another hierarchical system within class names.

Before Tailwind, every web designer I’ve ever worked with invented their own version of this.

Yes, CSS in theory is powerful and has everything necessary to avoid using Tailwind, but in practice CSS has a major flaw: You’re almost required to build a semantic model to get the full power. But this ignores that designers are working with mood and emotion just as much as document structure and information architecture. Capturing these more nebulous concepts as logical semantic rules is very difficult if not impossible. Tailwind just codified what everyone already did: Skip the semantic dance (“Making that text bold would be really cool, but what does it mean to be cool, as a general rule?”) and just create semantic rules like “bold” and “red”.

Re: Vanilla JavaScript support for Tailwind Plus

#162
post #161

Lovely. Verbosity aside, now on top of knowing CSS you need to learn another hierarchical system within class names.

Before Tailwind, every web designer I’ve ever worked with invented their own version of this. Yes, CSS in theory is powerful and has everything necessary to avoid using Tailwind, but in practice CSS has a major flaw: You’re almost required to build a semantic model to get the full power. But this ignores that designers are working with mood and emotion just as much as document structure and information architecture.…

Have you read the snippet? You have not, because it's a bunch of Tail-wind noise (very apt name)

Nothing semantic about .bg-white.

Re: Vanilla JavaScript support for Tailwind Plus

#163
post #161

Lovely. Verbosity aside, now on top of knowing CSS you need to learn another hierarchical system within class names.

Before Tailwind, every web designer I’ve ever worked with invented their own version of this. Yes, CSS in theory is powerful and has everything necessary to avoid using Tailwind, but in practice CSS has a major flaw: You’re almost required to build a semantic model to get the full power. But this ignores that designers are working with mood and emotion just as much as document structure and information architecture.…

This is the complete opposite of what good CSS is supposed to be. The class name is supposed to tell you what it is not how it looks like. Anyone remember CSS Zen Garden?

Re: Vanilla JavaScript support for Tailwind Plus

#164

Lovely. Verbosity aside, now on top of knowing CSS you need to learn another hierarchical system within class names.

I just can't fathom how someone can look at this and think "yeahhhh thats some good clean code". How did tailwind get so popular? Learn plain CSS. It's really good now

It is not the nicest but you will quickly get used to it and productive. However maintaining huge websites with thousands of thousands of lines of custom CSS will never be easy. And especially if somebody else wrote it.

Re: Vanilla JavaScript support for Tailwind Plus

#165
post #161

Lovely. Verbosity aside, now on top of knowing CSS you need to learn another hierarchical system within class names.

Before Tailwind, every web designer I’ve ever worked with invented their own version of this. Yes, CSS in theory is powerful and has everything necessary to avoid using Tailwind, but in practice CSS has a major flaw: You’re almost required to build a semantic model to get the full power. But this ignores that designers are working with mood and emotion just as much as document structure and information architecture.…

Doesn't react with styles components (or CSS in js) avoid this? I define reusable components, drawing from a shared theme object. But the styles are still css

Re: Vanilla JavaScript support for Tailwind Plus

#166
post #161

Earlier quoted context omitted.

Before Tailwind, every web designer I’ve ever worked with invented their own version of this. Yes, CSS in theory is powerful and has everything necessary to avoid using Tailwind, but in practice CSS has a major flaw: You’re almost required to build a semantic model to get the full power. But this ignores that designers are working with mood and emotion just as much as document structure and information architecture.…

This is the complete opposite of what good CSS is supposed to be. The class name is supposed to tell you what it is not how it looks like. Anyone remember CSS Zen Garden?

Original CSS spec, for reference: https://www.w3.org/TR/CSS1/#class-as-selector

The "good CSS" you're talking about was always the product of convention, and it was never sustainable for big, long-term projects. The CSS Zen Garden showcase only made sense in a world where everyone shared the same document or document structure. Those insane stylesheets depended on the source HTML document's inherent structure, which is the exact opposite of separation of concerns.

Inexperienced developers always underestimated the complexity they were adding to their project by using overly abstract classes and hidden structures between the DOM and the stylesheets. Tailwind (or any reasonable CSS methodology even) recognizes these problems and solves them.

Re: Vanilla JavaScript support for Tailwind Plus

#167

Earlier quoted context omitted.

class soup is what tailwind is. It's terrible because is just abbreviations of css attributes which you still need to know because you'll inevitably fiddle around devtools trying things out. The only "smart" thing about it is leaning strongly on using rem. how can it spill out onto the page? it's inline css. The (rare) inline selectors target only descendants. Truth is that it's winning over because it works best wit…

> how can it spill out onto the page? it's inline css. Because people are lazy and don’t make a component for everything. And some people are even lazier and don’t make UI components at all. I’ve seen a project where there was a Button component and that’s it. Well, that was vibe coded probably so makes sense. > Inline soup works better than looking for styling on different files in the context of the project, so her…

[I'm assuming styled-components was the preferred css-in-js solution until recently]

> If you do UI components with [insert your favourite CSS-in-JS solution], it stays in the same file.

I mean you can but "best practice" all around has been to put them separate and that's reflected in the majority of github repos in the training data of the LLMs.

> Maybe the proximity to markup within the file is important?

that's my assumption, yes. Seems to me LLMs work best when they output the relevant tokens right there with the markup instead of referencing some previous tokens even if relatively close.

styled components was the recommended solution in popular UI libraries like React MUI up until 2023 when chatgpt came out. Tailwind REALLY blew up with LLMs.

Re: Vanilla JavaScript support for Tailwind Plus

#168
post #60

Earlier quoted context omitted.

interesting, i had just watched Primeagens Standup with Adam and got the impression they don't do well for money, but a quick google came up with a bunch of posts from Adam himself disclosing some fairly impressive numbers. No idea if he still does ok from it, but he certainly did at one stage.

We are still healthy and profitable but revenue is down about 60% from peak, and continuing to trend down (I think mostly due to AI and open-source alternatives to the things we've historically charged for.) So things are fine but we do need to reverse the trend which is why we are pretty focused on the commercial side of things right now. We started a corporate sponsors/partner program recently, and I'm hoping that…

Adam, the Tailwind corporate sponsorship program is a great example of how to do it. I hope other notable open source projects learn from you.

Re: Vanilla JavaScript support for Tailwind Plus

#169

Earlier quoted context omitted.

This is the complete opposite of what good CSS is supposed to be. The class name is supposed to tell you what it is not how it looks like. Anyone remember CSS Zen Garden?

Original CSS spec, for reference: https://www.w3.org/TR/CSS1/#class-as-selector The "good CSS" you're talking about was always the product of convention, and it was never sustainable for big, long-term projects. The CSS Zen Garden showcase only made sense in a world where everyone shared the same document or document structure. Those insane stylesheets depended on the source HTML document's inherent structure, which…

I completely disagree. Look at (old) Reddit which allows for individual styling of each subreddit, or VSCode which allows themes to restyle the editor, as examples of real world products separating style from structure to huge success.

Not everything needs that level of separation, but to say that even basic separation is a problem to be solved by jamming everything into the class list is completely wrong.

Re: Vanilla JavaScript support for Tailwind Plus

#170

Lovely. Verbosity aside, now on top of knowing CSS you need to learn another hierarchical system within class names.

I just can't fathom how someone can look at this and think "yeahhhh thats some good clean code". How did tailwind get so popular? Learn plain CSS. It's really good now

Code doesn't necessarily need to be clean. We've had, like, two decades of "do clean code" and a lot of the time that mentality is shit. Putting stuff in a separate file and introducing layers and layers of abstractions to keep things "clean" doesn't always make it so. Often, it makes the code more complex, and makes behavior difficult to reason about.

The big problem with Vanilla CSS is that's it's sort of like Perl. It's a read-only language in practice.

Yes, theoretically, you can have perfect semantic CSS classes and use those. In practice, not every button is the same and you'll need slightly different styling in different places.

Yes, we could go in and change the .button class. But who is using the .button class? Where is it used? Nobody knows, and you can't find out. So editing that class is EXTREMELY risky. I have seen many an entire application break because some dev decided to edit CSS. The bigger the application, the bigger the risk.

Where I work, we have 1500 devs. Does anyone know the complete set of usecases a CSS class would have? No. Even if I gave you a month to research it, you would not find out. So you cannot edit CSS classes, it's far too risky.

So, the result is that everyone just tacks on to the end of the CSS. And now, in your clean code world, you have 50 different button classes. Um... whoops.

If you want to compartmentalize, what you can do is use components, in whatever backend/frontend framework you have. You can have the component have their own state and allow users of the component to change parts of it. Then, it doesn't matter how "unclean" the tailwind is - because you'll almost never see it. But if you need to change it, you can, without destroying the entire application. No more 50 button classes, and no more read-only implementations.

Post reply on HN