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

171–180 of 202 posts

Re: Vanilla JavaScript support for Tailwind Plus

#171

Post by adabyron »

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”…

As an older dev, I think it's a great natural evolution.

We had css, then SASS/LESS/etc, now Tailwind.

In the days of just CSS people would create variables/functions for their CSS in their server side language & have the server side language create the CSS. SASS/LESS allowed us to do that in stylesheets.

Now we have Tailwind (and of course CSS variables). Tailwind (and the code editor plugin devs) have done an amazing job at making a great workflow to handle CSS, especially in component type UI designs.

* Shout out to Foundation and Bootstrap for also helping us get to where we are today. Foundation is underrated in the history.

Re: Vanilla JavaScript support for Tailwind Plus

#172

Post by reactordev »

JoeyJoJoJr wrote: post #137
reactordev wrote: post #86

Earlier quoted context omitted.

12 years I’ve been saying this… 12, damn, years. React graduates look at me crazy. Angular devs say it’s not needed anyway. Svelte bros say get bent. I’m so happy that someone is paying attention. You don’t need a shadow dom, you don’t need rerendering of everything when a simple value changes. You simply need web components and scoped js/ts with vite or whatever rollup you use.

Can you point to any example projects or a todo list app that shows how modern web component can be utilized.

Sure

    class App extends HTMLDivElement {}

    customElements.define(“main-app”, App)
This is the simplest web component.

More examples:

https://github.com/mdn/web-components-examples

Re: Vanilla JavaScript support for Tailwind Plus

#173

Post by reactordev »

owebmaster wrote: post #149
MrJohz wrote: post #135

Earlier quoted context omitted.

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

I’m sorry but :has is new. 2023. Forgive this grey beard that built the world you know.

Re: Vanilla JavaScript support for Tailwind Plus

#174

Post by reactordev »

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.

This.

Re: Vanilla JavaScript support for Tailwind Plus

#175

Post by jt2190 »

zarzavat wrote: post #169
vehemenz wrote: post #166

Earlier quoted context omitted.

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.

> … to say that even basic separation is a problem to be solved by jamming everything into the class list…

Nobody said this.

Re: Vanilla JavaScript support for Tailwind Plus

#176

Post by serhalp »

emmanueloga_ wrote: post #84
ricardobeat wrote: post #67

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

In real projects I typically group the classes in a way that makes it easier to read, something like this: ... I currently do this manually but it would be nice to have some tooling to automate that kind of format.

You can use the Tailwind Prettier plugin to automate this: https://github.com/tailwindlabs/prettier-plugin-tailwindcss. I'm not sure if it would support the precise grouping and sorting you prefer, but it may be worth it anyway!

Re: Vanilla JavaScript support for Tailwind Plus

#178

Post by owebmaster »

reactordev wrote: post #173
owebmaster wrote: post #149

Earlier quoted context omitted.

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

I’m sorry but :has is new. 2023. Forgive this grey beard that built the world you know.

No need to apologize, it just does not make sense to belittle other people's work when you lack the knowledge to judge it. Nobody told you it used JS for the effect, you conjured that up yourself.

Re: Vanilla JavaScript support for Tailwind Plus

#179

Post by owebmaster »

MrJohz wrote: post #154
owebmaster wrote: post #148

Earlier quoted context omitted.

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

What do you mean? It's possible to apply attributes to any element in an arbitrary state: `hover:bg-black` would give an element a black background on hover. It's also apparently possible to apply attributes based on whether a state is fulfilled for a child element (i.e. the :has selector). E.g. `has-[:hover]:bg-black` would give an element a black background if any child is hovered.

> What do you mean?

the second part of your answer answered it perfectly. Thanks

Re: Vanilla JavaScript support for Tailwind Plus

#180

Post by owebmaster »

8n4vidtmkvmk wrote: post #99
hyperbolablabla wrote: post #59

Earlier quoted context omitted.

I remember toying with Polymer circa 2014, for some reason the word "transclusion" jumps into my mind, I remember being excited about it at the time. I barely remember what it means today though.

Polymer still haunts me to this day. It never made sense. It was literally designed to be deprecated. It's a big nasty polyfill for web components and it had/has a huge perf overhead. Not to mention it's ergonomics are just bad.

and some of the bad design decisions propagated to the web components implementation and Lit framework.
Post reply on HN