Web Components

Tailwind CSS is completely unusable within the Shadow DOM, making it fundamentally incompatible with Web Components. While workarounds exist via build-process injection, they are acknowledged as hacks and not a native solution.

The Shadow DOM, a core feature of Web Components, is reported as not enjoyable and complex to work with. Despite appreciation for other Web Components features like <template> and HTML modules, Shadow DOM adoption is hindered by its perceived difficulty.

Global styles cannot be easily applied inside web components due to shadow DOM encapsulation, creating friction when trying to apply consistent design systems.