Vite plugin to normalize Tailwind CSS for Shadow DOM usage
npm install vite-plugin-tailwind-shadowdomA Vite plugin that normalizes Tailwind CSS for Shadow DOM usage.
When using Tailwind CSS inside Shadow DOM (web components), two issues occur:
1. :root doesn't work - CSS custom properties defined on :root aren't accessible inside Shadow DOM
2. -webkit-hyphens: none breaks - Tailwind's @supports conditions with -webkit-hyphens: none don't work properly in Shadow DOM context
See tailwindlabs/tailwindcss#15005 for more details.
``bash`
npm install vite-plugin-tailwind-shadowdom -Dor
yarn add vite-plugin-tailwind-shadowdom -Dor
pnpm add vite-plugin-tailwind-shadowdom -D
`ts
// vite.config.ts
import { defineConfig } from 'vite';
import tailwindShadowDOM from 'vite-plugin-tailwind-shadowdom';
export default defineConfig({
plugins: [tailwindShadowDOM()],
});
`
This plugin runs after Tailwind processes your CSS and:
1. Converts :root to :host - Ensures CSS custom properties work within Shadow DOM
2. Removes problematic @supports conditions - Strips -webkit-hyphens: none conditions that break in Shadow DOM
`css
:root {
--color-primary: #3b82f6;
}
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) {
.truncate {
text-overflow: ellipsis;
}
}
`
`css
:host {
--color-primary: #3b82f6;
}
@supports (not (margin-trim: inline)) {
.truncate {
text-overflow: ellipsis;
}
}
`
This plugin is useful when:
- Building web components with Shadow DOM
- Embedding widgets/microfrontends that use Shadow DOM isolation
- Using Tailwind CSS with ?inline` CSS imports for Shadow DOM injection
- Vite 4.x, 5.x, 6.x, 7.x
- Tailwind CSS 3.x, 4.x
MIT © Maximilian Förster