Propose an alternative method to use Twind with Web components and Lit for Firefox and Safari

[gawlk]

Hi,

Love this project, it works great, ton of great ideas but I have one small issue with it: it's with adoptedStyleSheets. It works great with Chrome but as you know it doesn't with Firefox or Safari. As it's the only way to use both twind with web components it's not at all usable in production.

I was wondering if you guys had any idea for an alternative method that would work on more browsers.

If not I fully understand, just thought to point the need for such functionality.

Anyway,

Thanks for you work

[spitzertim]

Hi,

I also really like the project. But as @gawlk mentioned, the implementation from the example is unusable in production due to the limitations in Firefox and Safari.
This problem applies to lit-element in particular. Even when using a polyfill, lit will analyse a sheet that is put in its static get styles() only once (and too early) and not update the injected styles tags after tw has "learned" about the relevant style classes.
I have build a workaround that injects a respective style tag from the firstUpdated hook, but it still has a major caveat. When working with conditionally applied classes, twind is updating the sheet again, which then needs to be reflected in the style-tag. I found no way to hook into this.
You can find an example here https://stackblitz.com/edit/lit-twind-firefox?file=index.js.

I would suggest some kind of hook/event that could be listened for to re-trigger the creation of the style.
An approach to solve this might be (optionally) providing tw as a real lit-element directive that causes lit-element to update all relevant parts when tw "learns" about new classes and updates its sheet. The Chrome version only works, because the sheet change is directly reflected by the browser without the need for lit-element to change anything in the shadow-dom.

Anyways, cool project! Keep up the good work!

[sastan]

I'm not that familiar with web components and their frameworks. Would it be possible to use a style element (maybe using the dom sheet) for each web component which is updated per web component instance?

[Zozman]

I gotta +1 this as well. I had a FANTASTIC time using this library over the last week on a project (super easy to use and super easy to tell what's a tailwind class and what's my class) until I noticed that my font sizes weren't right on Firefox and had to rip it all out and replace it with using PostCSS + Tailwind (using lit-element as well).

[sastan]

This has been implemented in a new integration: @twind/with-web-components. It supports modern and legacy browsers.

You can view a preview of the docs here: https://next.twind-style.pages.dev/with-web-components. I have added a Lit example as well in case you are using that: https://next.twind-style.pages.dev/with-lit

This will be released soon (#417). Until is released you can use the pre-release version (for example @twind/with-web-components@next, @twind/core@next or @twind/preset-tailwind@next).

If you have any issues or questions please re-open this issue.