Help setting up solid-element with tailwind

[jonyo]

I'm trying to use tailwind with solid-element as a wrapper.

In an index.css I have

@tailwind base;
@tailwind components;
@tailwind utilities;

Then in my main solid component, at the top:

import './index.css';

That works just fine when I use the normal render method.

When I try to use customElement(...) to be able to use the component in other environments, it does not inherit the styles.

I've tried import styles from './index.css'; and doing <style>{styles}</style> but typescript says it is not a module.

In the solid-element docs, it makes a brief reference saying how it uses ShadyCSS or something so that CSS works in the shadow dom, but it does not go into details, I got the impression it should "just work".

I stumbled on one solution that involved making a sold element just for loading styles, that would look at the vite manifest, figure out the CSS file location, then use that to add a <link> tag to reference the CSS inside the module. That could work if it happened at build time but the implementation seemed to happen at run time, not the most efficient solution...

Here is a working demo that illustrates the problem:

https://studio.webcomponents.dev/edit/G9X3VwSP2NuNi3QbRJpn/README.md?p=stories

See how there are 2 stories... one that uses the solid component directly, you'll see the CSS works fine. One uses custom element and it looses the styling.

Note that the demo just imports a CSS file as a simplified demo, since that is how I was trying to do it, import a css file that had the tailwind generated stuff in it. I'd be open to other ways to get at the tailwind code though.

tl;dr: Trying to get vite + solidjs + solid-element + tailwind to work, so that the tailwind CSS works inside the custom element's shadow dom.

[captDaylight]

Can you try doing import styles from './index.css?inline';?

[jonyo]

That ended up being the solution, thanks! Though at first it was not working, I was missing 'vite/client' in one of the the configs.

[captDaylight]

Awesome, glad to hear!