Is it possible to embed tailwind classes in a Svelte custom component isolated inside the Shadow DOM?

I am building a custom component (web component) in Svelte and Tailwind.

My goal is to make this component have self-contained styling, but I have trouble with including the Tailwind stylesheet inside my custom component as it is isolated inside a Shadow DOM.

MyComponent.svelte

<svelte:options  customElement={{    tag: "my-component",  }}/><script>  import Child from "./Child.svelte";</script><span class="text-blue-500 p-4">  Foo<Child /></span>

Child.svelte

<span class="p-4 text-red-500">Bar</span>

When using <my-component></my-component>, it is unstyled, as the component is inside the ShadowDOM, it does not have access to the global Tailwind stylesheet.

Is there a way to embed the full Tailwind stylesheet for my component inside the Shadow DOM?

I have had some success with using the svelte preprocessor

svelte.config.js

export default {  preprocess: [preprocess(), vitePreprocess()],};

and including a link to my tailwind stylesheet in my component

<style lang="postcss" src="./../app.css"></style>

but this is quite cumbersome, as I need to add this line for EVERY child component of MyComponent.svelte