{"id":22875,"library":"vite-plugin-tailwind-shadowdom","title":"vite-plugin-tailwind-shadowdom","description":"A Vite plugin that normalizes Tailwind CSS for Shadow DOM usage by fixing two key issues: converting `:root` to `:host` so CSS custom properties apply inside Shadow DOM, and unwrapping `@supports` blocks that mention `-webkit-hyphens` to avoid breakage. Current stable version is 1.1.1, released under MIT. It runs after Tailwind processes CSS, only targeting CSS imported with a query (e.g. `?inline`). Compatible with Vite 4.x-7.x and Tailwind CSS 3.x-4.x. Lightweight with no runtime dependencies beyond Vite as a peer dependency. Differentiators: specifically solves Tailwind + Shadow DOM compatibility, minimal configuration, and respects query-based imports to avoid altering global styles.","status":"active","version":"1.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/Alletkla/vite-plugin-tailwind-shadowdom","tags":["javascript","vite","vite-plugin","tailwind","tailwindcss","shadow-dom","web-components","css","typescript"],"install":[{"cmd":"npm install vite-plugin-tailwind-shadowdom","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-tailwind-shadowdom","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-tailwind-shadowdom","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for plugin integration","package":"vite","optional":false}],"imports":[{"note":"ESM-only package; CommonJS require is not supported.","wrong":"const tailwindShadowDOM = require('vite-plugin-tailwind-shadowdom')","symbol":"default","correct":"import tailwindShadowDOM from 'vite-plugin-tailwind-shadowdom'"},{"note":"Export is default, not named. The package ships TypeScript types.","wrong":"import { tailwindShadowDOM } from 'vite-plugin-tailwind-shadowdom'","symbol":"tailwindShadowDOM","correct":"import tailwindShadowDOM from 'vite-plugin-tailwind-shadowdom'"},{"note":"The package does not export any types; use Vite's Plugin type for type annotations.","wrong":"import { Plugin } from 'vite-plugin-tailwind-shadowdom'","symbol":"Plugin type (TypeScript)","correct":"import type { Plugin } from 'vite'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport tailwindShadowDOM from 'vite-plugin-tailwind-shadowdom';\n\nexport default defineConfig({\n  plugins: [\n    tailwindShadowDOM()\n  ]\n});\n\n// your-component.ts\nimport styles from './styles.css?inline';\n\nclass MyElement extends HTMLElement {\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n  }\n  connectedCallback() {\n    const sheet = new CSSStyleSheet();\n    sheet.replaceSync(styles);\n    this.shadowRoot.adoptedStyleSheets = [sheet];\n  }\n}\ncustomElements.define('my-element', MyElement);","lang":"typescript","description":"Demonstrates setting up the plugin in vite.config.ts and using a ?inline CSS import inside a web component's Shadow DOM."},"warnings":[{"fix":"Ensure your Shadow DOM styles are imported with a query parameter, e.g. `import styles from './styles.css?inline'`.","message":"Plugin only transforms CSS imported with a query (e.g. `?inline`). Regular CSS imports are left unchanged, so :root and @supports issues will still occur if you import without a query.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If you rely on `:host-context`, consider using CSS parts or custom properties instead.","message":"The plugin does not support `:host-context` or other Shadow DOM pseudo-classes beyond `:host`. You may need to manually adjust your CSS.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update to the latest version: `npm install vite-plugin-tailwind-shadowdom@latest -D`","message":"Older versions (pre-1.0.0) may not support Vite 5 or Tailwind CSS 4. Upgrade to 1.1.1 for full compatibility.","severity":"deprecated","affected_versions":"<1.0.0"},{"fix":"Ensure the plugin runs after Tailwind in the Vite plugin chain. It is designed to run last, so no special ordering is needed.","message":"The plugin modifies CSS output after Tailwind, so it may not work correctly if other CSS post-processing plugins reorder or transform the CSS further.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Redefine required custom properties inside the Shadow DOM styles or use CSS custom properties with `@property` to ensure inheritance.","message":"The plugin only converts `:root` to `:host` within CSS imported with a query; it does not change `:root` in global stylesheets. If you have shared variables defined globally, they may not be available inside Shadow DOM.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use `pnpm install` (without --prod) or add vite and the plugin as dependencies in package.json.","cause":"pnpm install --prod only installs production dependencies, missing Vite and plugin.","error":"ERR_PNPM_NO_DEV_DEPENDENCIES_INSTALLED\\nIn a CI environment, devDependencies may not be installed."},{"fix":"Correct: `import tailwindShadowDOM from 'vite-plugin-tailwind-shadowdom'`","cause":"Incorrect import syntax: default import used as named import.","error":"TypeError: tailwindShadowDOM is not a function"},{"fix":"Ensure `this.shadowRoot.adoptedStyleSheets = [sheet]` is called in `connectedCallback()` or later.","cause":"Using `adoptedStyleSheets` before the element is connected to DOM.","error":"Uncaught TypeError: Failed to construct 'CSSStyleSheet': The document is not active."},{"fix":"Add `?inline` to the import: `import styles from './styles.css?inline'`","cause":"CSS import does not have a query parameter (e.g. `?inline`), so plugin did not process it.","error":"The 'style' CSS module is not properly transformed; `-webkit-hyphens: none` still appears in output."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}