Request for including tailwind-css

[pnsvk]

Let me take this opportunity to express my heartfelt thanks for this package. This is such a pain-reliever.. Never thought it could get so smooth to build a totally custom widget.

Right now, to style any of the existing ipywidgets too, I usually load tailwind-css to avoid writing vanilla-css.

Thought adding it as a default offering with "anywidget" bundle could make it more approachable to the user-base.

And thank you so much once again, even if you don't care my request.

[manzt]

Thanks for the kind words. I'm glad you've found anywidget useful.

I'd really like to avoid adding any sort of css framework to anywidget. Tailwind is popular right now (I use it in many of my own projects!), but similarly something like bootstrap was very popular years ago. Additionally the use of Tailwind via a CDN is not intended for production:

"Use the Play CDN to try Tailwind right in the browser without any build step. The Play CDN is designed for development purposes only, and is not the best choice for production."

The primary issue is that 1.) the tailwind playground is not CSS but a large JS runtime (it's 346kb!), and 2.) the playground allows you to configure tailwind globally for the entire page. If multiple anywidget's relied on tailwind globally, they could each override other's styles. Additionally, anywidget is not only intended for prototyping but also production widgets (i.e., pip-installable packages) and adding a large dependency like that is not desireable.

With that said, if you would like to use tailwind in your widgets, you can load the JS Playground yourself within your widget's ESM module. Just be careful because again, these styles are global on the page and it is a very large dependency.

// loads a script globally on the page. If the script already exists, does not reload the script.
async function loadScript(href) {
  if (document.querySelector(`script[src='${href}']`)) {
      // script already loaded, skills awaiting a new load
      return;
  }
  return new Promise((resolve, reject) => {
    let script = Object.assign(document.createElement("script"), {
      src: href,
      onload: resolve,
      onerror: reject,
    });
    document.body.append(script);
  })
}   
// make sure the tailwind playground is loaded when the module loads
await loadScript("https://cdn.tailwindcss.com");
export function render(view) {
    // use tailwind in your components
}

[pnsvk]

thank you so much, and really love the possibilities this package opens up for me.. starting with integrating all the cool visualizations online with d3.