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

Vanilla JavaScript support for Tailwind Plus

tailwindcss.com

Post reply on HN
Print view View original

141–150 of 202 posts

Re: Vanilla JavaScript support for Tailwind Plus

#141

Post by troupo »

omnimus wrote: post #125
AstroBen wrote: post #107

Earlier quoted context omitted.

This is one of the least elegant ways to scope CSS though.. you may as well just write inline CSS I like BEM personally. "navbar__item" scopes the styling to the nav item > Once you're well familiar with your toolset, you know what to reach for to quickly reach a desired end state This also applies to plain CSS, doesn't it? The big value add that Tailwind brought isn't their utility classes IMO - it's their philosoph…

You can’t use inline css it’s not at all the same. Inline css 1. Can’t use media queries (responsive design). 2. Gets you to specificity hell - you loose ability to cascade. 3. Does not follow any system or reuse of values. 4. Values can’t be centrally changed. Utility clases are still classes - when you change class value it changes everywhere where the class is used. 5. Its verbose. Utility classes can have multipl…

> Values can’t be centrally changed.

Or you end up redefining dozens of CSS variables inline :)

Re: Vanilla JavaScript support for Tailwind Plus

#142

Post by Levitating »

Jaygles wrote: post #100
AstroBen wrote: post #97

Earlier quoted context omitted.

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

I've worked in many different FE codebases with a variety of CSS "strategies". This sort of thing is objectively ugly and takes a minute to learn. The advantages of this approach I found is two-fold 1. You can be more confident that the changes you are making apply to only the elements you are interested in changing You are modifying an element directly. Contrast with modifying some class that could be on any number…

Why not just use the style attribute?

Re: Vanilla JavaScript support for Tailwind Plus

#143

Post by dzonga »

conradfr wrote: post #72
gavinray wrote: post #7

Earlier quoted context omitted.

Tailwind Plus is a paid collection of UI components and templates. TailwindCSS itself is meant to be nothing more than a styling tool, like Bootstrap...

Bootstrap has javascript components.

different business models. bootstrap was made by twitter which was making money in it's way. while tailwind their monetary model is selling components.

for me the only thing I wish bootstrap had was the money color options tailwind has e.g bg-indigo-400 etc

Re: Vanilla JavaScript support for Tailwind Plus

#144

Post by lvl155 »

abtinf wrote: post #22

The world would be a significantly better place if someone could throw a small mountain of money at the Tailwind folks so that they can stop worrying about money and simply make the full tailwind experience freely available. There are so many lost opportunities for deep integration with other projects. Kind of like how Jeff Bezos threw a bunch of money at 37signals at some insane valuation, which helped them complete…

Dude, a lot of devs bought their products during pandemic. They had a great launch if I remember correctly.

Re: Vanilla JavaScript support for Tailwind Plus

#145

Post by luckylion »

MrJohz wrote: post #136
luckylion wrote: post #129

Earlier quoted context omitted.

That doesn't affect the parent (.group) based on the child though.

No, but `group` doesn't affect the parent in Tailwind. You put `group` in the parent to mark it, and then use the `group/...` syntax to apply different properties to the child, depending on the different states of the parent. This doesn't require `:has`. I don't think Tailwind has a built-in `:has` tool, but I suspect it would be easy to add one as a custom class.

Oh, I misunderstood the GP then, thanks for clarifying!

Re: Vanilla JavaScript support for Tailwind Plus

#146

Post by owebmaster »

Levitating wrote: post #142
Jaygles wrote: post #100

Earlier quoted context omitted.

I've worked in many different FE codebases with a variety of CSS "strategies". This sort of thing is objectively ugly and takes a minute to learn. The advantages of this approach I found is two-fold 1. You can be more confident that the changes you are making apply to only the elements you are interested in changing You are modifying an element directly. Contrast with modifying some class that could be on any number…

Why not just use the style attribute?

verbosity. Using style, "p-4" becomes padding: calc(var(--spacing)*4);

Re: Vanilla JavaScript support for Tailwind Plus

#147

Post by owebmaster »

chrismorgan wrote: post #98
combyn8tor wrote: post #77

This is great. Last time I looked into this UI component world I was surprised the popular UI libraries weren't all 'headless' at their base. Web components have been around a long time now. What was stopping this approach? There are so many framework specific libraries like shadcn, and the community set about building half finished conversions for different frameworks like Vue, which are always several iterations be…

Put simply: if you’re using something like React, Vue, Svelte, whatever, then Web Components are strict overhead in terms of bundle size and runtime overhead. And when there’s impedance mismatch between the two worlds, which I hear is particularly common in React (can’t attest it personally, I don’t use React), you have to compromise on functionality or ergonomics, or else do fancier bindings, at which point why even…

> In a world where React is dominant and you’re wanting to use React yourself, targeting Web Components just doesn’t make sense.

Just a reminder that jQuery was once dominant, too.

Re: Vanilla JavaScript support for Tailwind Plus

#148

Post by owebmaster »

MrJohz wrote: post #105
lemonberry wrote: post #89

Earlier quoted context omitted.

I believe it's regular old css. The :has() pseudo class. https://developer.mozilla.org/en-US/docs/Web/CSS/:has

It's not even :has, it's just how child selectors in CSS have always worked. // Not actually needed, here // for competition .group {} // Child selector .group:hover group\/hover\:bg-black { background-color: black; } // Which is essentially the same as .group:hover child { background-color: black; }

is it possible to add the hover to the parent without also adding it to the child ?

Re: Vanilla JavaScript support for Tailwind Plus

#149

Post by owebmaster »

MrJohz wrote: post #135
omnimus wrote: post #131

Earlier quoted context omitted.

Isn’t it funny that in a thread about how Tailwind is bad and people should learn real css… people also think css selectors require JS?

:has doesn't require JS, I think the previous poster was just confused about which selector `group` is equivalent to.

Which is a indication they might not know CSS that well.

Re: Vanilla JavaScript support for Tailwind Plus

#150

Post by ricardobeat »

omnimus wrote: post #128
AstroBen wrote: post #97

Earlier quoted context omitted.

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

Tailwind goes into crazy extreme so people can copy paste whole complex components and they work. That’s why you can dunk on these verbose examples. This is not how custom functional css codebase looks. In custom projects you change the system/configuration to fit the project. You create your own utilities for example you wont have “text-lg sm:text-xl font-semibold tracking-tight” but will have class “font-heading-2”…

> will have class “font-heading-2”

At that point, why not write these in CSS instead? There is little advantage in using the tailwind shorthand classes in your own class definitions.

- You can use plain CSS variables for theming

- You're bringing back the supposed downsides of cascading and shared classes

- simple Gzip compression will achieve similar size reduction as the utility classes

Working on your codebase now requires full knowledge of the Tailwind utilities, layers, directives, pseudo-classes, theming, and all the complexity that comes along with them.

Post reply on HN