Registry / web-framework / vite-plugin-tailwind-shadowdom

vite-plugin-tailwind-shadowdom

library1.1.1jsnpmunverified

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.

web-framework

npm install vite-plugin-tailwind-shadowdom

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-TAILWI

vite-plugin-tailwind-shadowdom

web-frameworkjavascriptv1.1.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import tailwindShadowDOM from 'vite-plugin-tailwind-shadowdom'

✗ const tailwindShadowDOM = require('vite-plugin-tailwind-shadowdom')

ESM-only package; CommonJS require is not supported.

tailwindShadowDOM

✓ import tailwindShadowDOM from 'vite-plugin-tailwind-shadowdom'

✗ import { tailwindShadowDOM } from 'vite-plugin-tailwind-shadowdom'

Export is default, not named. The package ships TypeScript types.

Plugin type (TypeScript)

✓ import type { Plugin } from 'vite'

✗ import { Plugin } from 'vite-plugin-tailwind-shadowdom'

The package does not export any types; use Vite's Plugin type for type annotations.

Demonstrates setting up the plugin in vite.config.ts and using a ?inline CSS import inside a web component's Shadow DOM.

// vite.config.ts import { defineConfig } from 'vite'; import tailwindShadowDOM from 'vite-plugin-tailwind-shadowdom'; export default defineConfig({ plugins: [ tailwindShadowDOM() ] }); // your-component.ts import styles from './styles.css?inline'; class MyElement extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); } connectedCallback() { const sheet = new CSSStyleSheet(); sheet.replaceSync(styles); this.shadowRoot.adoptedStyleSheets = [sheet]; } } customElements.define('my-element', MyElement);

Debug

Known issues

gotchaPlugin 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.

fix

Ensure your Shadow DOM styles are imported with a query parameter, e.g. `import styles from './styles.css?inline'`.

affects: >=1.0.0

gotchaThe plugin does not support `:host-context` or other Shadow DOM pseudo-classes beyond `:host`. You may need to manually adjust your CSS.

fix

If you rely on `:host-context`, consider using CSS parts or custom properties instead.

affects: >=1.0.0

deprecatedOlder versions (pre-1.0.0) may not support Vite 5 or Tailwind CSS 4. Upgrade to 1.1.1 for full compatibility.

fix

Update to the latest version: `npm install vite-plugin-tailwind-shadowdom@latest -D`

affects: <1.0.0

gotchaThe plugin modifies CSS output after Tailwind, so it may not work correctly if other CSS post-processing plugins reorder or transform the CSS further.

fix

Ensure the plugin runs after Tailwind in the Vite plugin chain. It is designed to run last, so no special ordering is needed.

affects: >=1.0.0

gotchaThe 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.

fix

Redefine required custom properties inside the Shadow DOM styles or use CSS custom properties with `@property` to ensure inheritance.

affects: >=1.0.0

Errors

Common errors & fixes

ERR_PNPM_NO_DEV_DEPENDENCIES_INSTALLED\nIn a CI environment, devDependencies may not be installed.

pnpm install --prod only installs production dependencies, missing Vite and plugin.

fix

Use `pnpm install` (without --prod) or add vite and the plugin as dependencies in package.json.

TypeError: tailwindShadowDOM is not a function

Incorrect import syntax: default import used as named import.

fix

Correct: `import tailwindShadowDOM from 'vite-plugin-tailwind-shadowdom'`

Uncaught TypeError: Failed to construct 'CSSStyleSheet': The document is not active.

Using `adoptedStyleSheets` before the element is connected to DOM.

fix

Ensure `this.shadowRoot.adoptedStyleSheets = [sheet]` is called in `connectedCallback()` or later.

The 'style' CSS module is not properly transformed; `-webkit-hyphens: none` still appears in output.

CSS import does not have a query parameter (e.g. `?inline`), so plugin did not process it.

fix

Add `?inline` to the import: `import styles from './styles.css?inline'`

Upgrade

Version history

1.1.1latest on npm

Audit

Dependencies

viterequiredPeer dependency required for plugin integration

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Alletkla/vite-plugin-tailwind-shadowdom ↗

packagehttps://www.npmjs.com/package/vite-plugin-tailwind-shadowdom ↗