{"id":22819,"library":"vite-plugin-scope-tailwind","title":"Vite Plugin Scope Tailwind","description":"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.","status":"active","version":"2.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/dolanmiu/vite-plugin-scope-tailwind","tags":["javascript","tailwind","tailwindcss","vite","vite-plugin","vite-plugin-tailwind","vite-plugin-scope-tailwind","scope","encapsulate","typescript"],"install":[{"cmd":"npm install vite-plugin-scope-tailwind","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-scope-tailwind","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-scope-tailwind","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Vite plugin development dependency","package":"vite","optional":false},{"reason":"Peer dependency for TailwindCSS styles","package":"tailwindcss","optional":false}],"imports":[{"note":"Default export; works with both ESM and CJS since v1.1.3.","wrong":"const scopeTailwind = require('vite-plugin-scope-tailwind')","symbol":"scopeTailwind","correct":"import scopeTailwind from 'vite-plugin-scope-tailwind'"},{"note":"Type import only; not a runtime export.","wrong":"import { ScopeTailwindOptions } from 'vite-plugin-scope-tailwind'","symbol":"ScopeTailwindOptions","correct":"import type { ScopeTailwindOptions } from 'vite-plugin-scope-tailwind'"},{"note":"The react option is boolean, not string.","wrong":"scopeTailwind({ react: 'true' })","symbol":"scopeTailwind (React usage)","correct":"scopeTailwind({ react: true })"}],"quickstart":{"code":"import scopeTailwind from 'vite-plugin-scope-tailwind';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n  plugins: [\n    scopeTailwind({\n      react: false, // set to true if using React\n      ignore: [/^my-lib-/] // optional: ignore classes starting with 'my-lib-'\n    })\n  ]\n});","lang":"typescript","description":"Basic vite config using scopeTailwind with optional react and ignore options."},"warnings":[{"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.","message":"v2.0.0 changed scoping mechanism from prefix-based to ID-append-based, breaking existing scoped class references.","severity":"breaking","affected_versions":"<2.0.0"},{"fix":"Replace `template: 'react'` with `react: true`.","message":"The `template` option was removed in v2.0.0; use `react` option instead.","severity":"deprecated","affected_versions":">=1.0.0 <2.0.0"},{"fix":"Ensure scopeTailwind() is listed before any Tailwind-related PostCSS setup.","message":"Plugin must be placed before Tailwind's PostCSS plugin in the Vite config to avoid race conditions.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Wrap library components with a container class that is also scoped, or use the `ignore` option for specific classes.","message":"When using React, the plugin automatically handles JSX classes, but custom components may still leak styles.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Upgrade to v2.0.2+ or manually add a `declare module 'vite-plugin-scope-tailwind'` in a `.d.ts` file.","cause":"Missing type declaration before v2.0.2.","error":"Could not find a declaration file for module 'vite-plugin-scope-tailwind'"},{"fix":"Run `npm install tailwindcss -D` and create a `postcss.config.js` with `module.exports = { plugins: { tailwindcss: {} } }`.","cause":"TailwindCSS not installed or postcss.config.js missing.","error":"Error: PostCSS plugin tailwindcss requires tailwindcss to be configured"},{"fix":"Use `import scopeTailwind from 'vite-plugin-scope-tailwind'` or `const scopeTailwind = require('vite-plugin-scope-tailwind').default`.","cause":"Using default import with CommonJS `require` incorrectly.","error":"Uncaught TypeError: scopeTailwind is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}