Using Tailwind CSS Inside Web-Components
12 days ago
- #Tailwind CSS
- #Web Components
- #Shadow DOM
- Tailwind CSS doesn't work out-of-the-box inside Web Components due to Shadow DOM style isolation.
- Precompiling scoped, optimized Tailwind CSS per component at build time is the recommended solution.
- Using global CSS in Shadow DOM leads to duplication and overwriting of theme variables.
- Client-side compilation of Tailwind styles is inefficient and defeats the purpose of precompilation.
- CSS Variables defined in the document root are accessible in Shadow DOM, enabling theme consistency.
- A custom build plugin can compile Tailwind CSS per web-component, optimizing bundle size and performance.
- The approach allows for code-splitting, minification, and theme variable usage within web-components.
- Limitations include the need to import the virtual module in the same file and exclusion of Tailwind's default CSS reset.