3 ms·
Htmx Tailwind Alternative: Inline Scoped CSS
- geenat 3y agoA 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!
- jessehattabaugh 3y agothis is just shadowDOM with extra steps
- infogulch 3y agoThis 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_components/Using_shadow_DOM https://developer.mozilla.org/en-US/docs/Web/API/Web_compone... [2]: https://developer.chrome.com/articles/declarative-shadow-dom/ https://developer.chrome.com/articles/declarative-shadow-dom... | https://caniuse.com/declarative-shadow-dom https://caniuse.com/declarative-shadow-dom