Hacker News new | ask | show | jobs
by RadiozRadioz 458 days ago
> I’ve used TailwindCSS for the styling, but you can apply them directly with CSS for the same result

    class="[&::-webkit-progress-bar]:rounded-lg [&::-webkit-progress-value]:rounded-lg   [&::-webkit-progress-bar]:bg-stone-300 [&::-webkit-progress-value]:bg-stone-400 [&::-moz-progress-bar]:bg-stone-400"
Anyone else think this Tailwind-everything trend has gone too far? Tools have strengths and weaknesses, but I never understood why Tailwind specifically is so poularly seen as some kind of "default" these days - rather than a supplement to CSS for common/simple operations.

Personally I think the popular trends have overcorrected from CSS; soon we'll realize that the amount of complexity above is screaming to be packaged up and named something, rather than being crammed into the markup alongside more sensible things like text-black.
2 comments
chatmasta 458 days ago
In 10 years, Tailwind is going to be like Bootstrap is now. Embedding a sophisticated DSL into attribute strings has never been a good idea. It works as long as the tooling around it is kept up to date, but it’s a hack. CSS may be ugly, but at least browsers are committed to maintaining backwards compatibility, and I can statically analyze it to reason about its behavior.
link
hbroadbent 458 days ago
Sure it's not the prettiest, but even if you styled this with CSS directly you'd need to target those selectors. `#range-input::webkit-progress-bar` etc.

To your final point, I completely agree that it should be packaged up — I'd package this up into a component (react, partial etc.) which would encapsulate the styles via Tailwind, HTML and logic.

I like Tailwind as a way to more closely tie my markup with styling. I'll package it all up into a component anyway, but Tailwind keeps it all in 1 spot (the markup) rather than spread across multiple files.

link
RadiozRadioz 458 days ago
You can't put CSS alongside a component's markup in the same file? What kind of framework are you using?

I don't use them all, but I know Vue and Svelte can. React is really popular, so I assume it's got a way.

link