Htmx Tailwind Alternative: Inline Scoped CSS

github.com

11 pointsgeenat3 comments

A compromise for people who are intrigued by Tailwind's Locality of Behavior but don't want the insane bulk of the CDN or build step-- and want to still write pure vanilla CSS.

Write <style> inline and automatically have it scoped to that element. No more writing individual class/id's.

Been really wanting to transition back to plain CSS for everything moving forward. I miss the ultra-fast "inspect, play with styles, copy/paste into project" workflow that this re-enables.

BTW: Totally unheard of CSS feature you get for free: Scoped inline @keyframes for looped animations!

this is just shadowDOM with extra steps

This is extra steps compared to Shadow DOM [1]?! This is 15 lines of js and works with style tags anywhere in the page, and is particularly useful in SSR scenarios (which htmx encourages). Until we get declarative shadow dom [2] I don't think calling it 'fewer steps' is remotely reasonable.

[1]: https://developer.mozilla.org/en-US/docs/Web/API/Web_compone...

[2]: https://developer.chrome.com/articles/declarative-shadow-dom... | https://caniuse.com/declarative-shadow-dom

Reply on news.ycombinator.com