Registry / devops / vite-plugin-scope-tailwind

vite-plugin-scope-tailwind

library2.0.2jsnpmunverified

A Vite plugin (v2.0.2, latest) that encapsulates and scopes TailwindCSS styles in library builds, preventing class name clashes with consumer apps. By appending unique IDs to Tailwind classes automatically (similar to Tailwind's prefix option but automatic), it avoids the need for manual prefixing or !important hacks. Supports React with the react option and allows ignoring specific classes via regex or strings. Actively maintained, ships TypeScript types.

devops

npm install vite-plugin-scope-tailwind

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-SCOPE-

vite-plugin-scope-tailwind

devopsjavascriptv2.0.2

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.

scopeTailwind

✓ import scopeTailwind from 'vite-plugin-scope-tailwind'

✗ const scopeTailwind = require('vite-plugin-scope-tailwind')

Default export; works with both ESM and CJS since v1.1.3.

ScopeTailwindOptions

✓ import type { ScopeTailwindOptions } from 'vite-plugin-scope-tailwind'

✗ import { ScopeTailwindOptions } from 'vite-plugin-scope-tailwind'

Type import only; not a runtime export.

scopeTailwind (React usage)

✓ scopeTailwind({ react: true })

✗ scopeTailwind({ react: 'true' })

The react option is boolean, not string.

Basic vite config using scopeTailwind with optional react and ignore options.

import scopeTailwind from 'vite-plugin-scope-tailwind'; import { defineConfig } from 'vite'; export default defineConfig({ plugins: [ scopeTailwind({ react: false, // set to true if using React ignore: [/^my-lib-/] // optional: ignore classes starting with 'my-lib-' }) ] });

Debug

Known issues

breakingv2.0.0 changed scoping mechanism from prefix-based to ID-append-based, breaking existing scoped class references.

fix

Upgrade to v2.0.0+ and verify that any hardcoded class references (e.g., in tests) are updated to match the new scoped format.

affects: <2.0.0

deprecatedThe `template` option was removed in v2.0.0; use `react` option instead.

fix

Replace `template: 'react'` with `react: true`.

affects: >=1.0.0 <2.0.0

gotchaPlugin must be placed before Tailwind's PostCSS plugin in the Vite config to avoid race conditions.

fix

Ensure scopeTailwind() is listed before any Tailwind-related PostCSS setup.

affects: >=2.0.0

gotchaWhen using React, the plugin automatically handles JSX classes, but custom components may still leak styles.

fix

Wrap library components with a container class that is also scoped, or use the `ignore` option for specific classes.

affects: >=2.0.0

Errors

Common errors & fixes

Could not find a declaration file for module 'vite-plugin-scope-tailwind'

Missing type declaration before v2.0.2.

fix

Upgrade to v2.0.2+ or manually add a `declare module 'vite-plugin-scope-tailwind'` in a `.d.ts` file.

Error: PostCSS plugin tailwindcss requires tailwindcss to be configured

TailwindCSS not installed or postcss.config.js missing.

fix

Run `npm install tailwindcss -D` and create a `postcss.config.js` with `module.exports = { plugins: { tailwindcss: {} } }`.

Uncaught TypeError: scopeTailwind is not a function

Using default import with CommonJS `require` incorrectly.

fix

Use `import scopeTailwind from 'vite-plugin-scope-tailwind'` or `const scopeTailwind = require('vite-plugin-scope-tailwind').default`.

Upgrade

Version history

2.0.2latest on npm

Audit

Dependencies

viterequiredVite plugin development dependency

tailwindcssrequiredPeer dependency for TailwindCSS styles

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/dolanmiu/vite-plugin-scope-tailwind ↗

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