LitElement Theme Configuration Issue

[orindholt]

Hi! I've been trying to implement Twind in LitElement, but having issues when trying to create a custom theme. It just won't recognize the theme's values as utilities, no matter what I do, with no error. Couldn't find a fix on stackoverflow, any idea what the problem is?

setup({
  theme: {
    extend: {
      colors: {
        purple: '#fae4fe',
      },
    },
  },
});

render() {
    return html` <h1 class="${tw`text(3xl purple)`}">${this.name}!</h1>`;
  }

Full code

[sastan]

You are using v0.16, right? Could you give https://github.com/tw-in-js/twind/tree/next a try?

I plan to provide some examples for litelement but haven't found the time yet.

[orindholt]

Thanks for your response! I'm using twind v0.16.16 and lit v2.1.0. I tried using what you proposed, but I couldn't get it to work. Either way is properly too big a conversion on my current project. Also, it seems that setup is misbehaving in other ways.. I need to import an external stylesheet for a slider package (Splide), and It does import with:

setup({
  preflight: {
    '@import': `url('https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css')`,
  },
});

And it appears on network with the full stylesheet. But it seems to get purged or atleast just isn't used in some way, because the styles on the classes just isn't applying to my elements. Any suggestions? It's also worth mentioning that other options such as mode: strict works without issues.

[sastan]

I need to take a look at this. But I'm not sure when I get to this.

[orindholt]

Alrighty, no problem. Thanks for looking into it @sastan!

[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.