Support for Shadow DOM in @twind/core and @twind/with-web-components with @twind/preset-tailwind

[beuluis]

Hello Twind Team,

I'm currently working on developing a web component that is mounted with the Shadow DOM. For this, I'm using @twind/core and @twind/with-web-components to manage the styles within my web component. However, I'm encountering some challenges and have a few questions regarding how @twind/preset-tailwind is expected to function in this context.

When using @twind/preset-tailwind, I expected the base styles from Tailwind CSS to be automatically applied within the Shadow DOM of my web component. However, I've noticed that the preflight styles are designed to target native HTML tags like html and body. Since these tags are not applicable within the Shadow DOM, the base styles are either not being applied as expected or are leading to unexpected behavior.

Questions

1. Shadow DOM Compatibility: How is @twind/preset-tailwind supposed to work with the Shadow DOM? Specifically, is there a recommended approach for ensuring that Tailwind's preflight styles are properly scoped and injected into the Shadow DOM of a web component without relying on global HTML elements like html and body?
2. Base Styles Application: Should I be manually modifying or injecting the base styles to avoid targeting global HTML elements, or is there a way to configure Twind to automatically adjust these styles for Shadow DOM compatibility when using the Tailwind preset?
3. Best Practices: Are there any best practices or examples that demonstrate how to effectively use Twind with web components, particularly when combining @twind/core, @twind/with-web-components, and @twind/preset-tailwind, while ensuring compatibility with the Shadow DOM?

Any guidance or recommendations on how to proceed would be greatly appreciated. If there's an example or documentation that covers this use case, a pointer to that would also be very helpful.

Thank you for your work on Twind—it's a fantastic tool!