Show HN: Vanilla CSS Tailwind alternative in 18 lines
github.com
github.com
So that's a fundamental difference, no build step, tiny JS runtime instead that hooks into the page rendering.
The concept is interesting.
Has the benefit of staying close to vanilla CSS syntax.
I'm curious why you chose 'me' or 'this' instead of '&'?
OTOH, it might be useful for the browser to consider the style tags as valid but with unknown element names (that are also forbidden for custom elements as they don't have a dash). Don't know if this would be possible using '&' and it also collides with the CSS nesting proposal.
So.. after all, nice idea!
Being a bit more cynical though, I'm not sure if the JS dependeny and performance implications would be worth it for me to use in actual projects.
Tailwind has the benefit of producing lean CSS files with 0% dead CSS.
This approach would be more prone to the usual issues with CSS I guess, but addding custom syntax anyway. I'm also sceptical of transpiling to CSS using JS on the client.
Looking at the source, the parser is written to let you use any of "me", "this", or "self" (I'm guessing you spotted that).
If I have one quibble with this project it's that line. The multiplicity of "this" designators is going to make client code written for this library harder to read not easier.
IMO the author should just pick one and stick with it, and do it now before there are too many pages using it. This is a false "flexibility" that feels like the bad old days when people thought "browsers should be flexible in what they accept", which did not serve us well in the long run.
That said, this is brilliant work.
So cool - can't wait to start using this!
Still, almost all pages (at least most web applications) need media queries for their layout as well as for their individual components.
I think the author of this little 10LOC script is well aware of the style attribute so I fail to see what you want to say with your original comment.
Especially the link - you do realize that this script is written in simple "vanilla js", right?
But soon grows into a mess. Legitimate use cases exist, but there are many obvious reasons to avoid using it as the main driver of page css.
@media lg { /* As many lg properties you like instead of adding lg: to everything. */ }
https://developer.chrome.com/articles/css-nesting/#nesting-m...
Tailwind has a similar directive in external CSS files. Pun: it's not called @media. But the DSL again has some benefits here.
@apply + @screen is more powerful than what's possible in vanilla CSS. Especially regarding nesting and enforcing the design system breakpoints. Tailwind is pretty closely related to PostCSS in this regard, and keeps its syntax extensions close to proposals that might one day become standards (nesting, custom media queries etc)
But using Tailwind and focusing on external CSS files seems like the worst of both worlds.
I have to say, in a React context I prefer styled components or simple external CSS, but in my previous job Tailwind was a godsend. Having to churn out large amounts of CSS in a quick yet precise manner, involving other team members who might have different habits and knowledge levels, this is where Tailwind shines for me.