Embeddable Widgets with Vite, React, Tailwind 4 & Web Components

Building embeddable widgets with React, Tailwind 4, and Web Components sounds clean in theory, but Shadow DOM limitations expose two real pain points: CSS Custom Properties (@property) don't work inside shadow roots, and @font-face definitions can't be used within them either. The team solved the CSS issue with a custom PostCSS plugin that rewrites Tailwind's @property rules into plain declarations, and handled fonts by loading them into the parent document at runtime.