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.
Hah fair enough!
I've actually just stumbled on the Popover hint demo (https://mdn.github.io/dom-examples/popover-api/popover-hint/) which uses the Popover API to create native HTML tooltips. I'm planning to update my article with them once I've played around a bit more
Not really an element, but `popover` attributes for elements, maybe?
Recently I've been using fieldset+legend to great effect for titled input forms. In fact I've used it almost exclusively in my last contract.
Some other ones that too few people use: progress, cite, sub/sup, datalist (very useful), and search (also very useful as a busy indicator when used with no percentage).
Hey HN, just sharing the way I've been adding Tailwind CSS to my Chrome Extensions lately.
tldr is that it's dead easy to save the CDN script locally and use it, plus it doesn't come with the typical drawbacks that websites face (ie: loading external resources).
thanks! and that's a cool idea — I like the localstorage idea, plus I'm thinking adding some hotkeys could help too (so pressing h would switch to hex mode).
