# vite-plugin-scope-tailwind

> A vite-plugin to encapsulate and scope your TailwindCSS styles to your library and prevent them affecting styles outside

Latest version **2.0.2** (published 2025-06-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-scope-tailwind
pnpm add vite-plugin-scope-tailwind
yarn add vite-plugin-scope-tailwind
bun add vite-plugin-scope-tailwind
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2025-06-03 |
| First published | 2023-05-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 69.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dolan Miu |
| Maintainers | dolanmiu |
| Keywords | tailwind, tailwindcss, vite, vite-plugin, vite-plugin-tailwind, vite-plugin-scope-tailwind, scope, encapsulate, library, css, styles, style, css-in-js, css-in-jsx |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-scope-tailwind
- Repository: https://github.com/dolanmiu/vite-plugin-scope-tailwind
- Homepage: https://github.com/dolanmiu/vite-plugin-scope-tailwind#readme
- Issues: https://github.com/dolanmiu/vite-plugin-scope-tailwind/issues
- npm.io page: https://npm.io/package/vite-plugin-scope-tailwind

## Dependencies (3)

- [uniqid](https://npm.io/package/uniqid.md) ^5.4.0
- [@types/uniqid](https://npm.io/package/@types/uniqid.md) ^5.3.2
- [app-root-path](https://npm.io/package/app-root-path.md) ^3.1.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 2.0.2 (latest) — 2025-06-03
- 2.0.1 — 2024-07-11
- 2.0.0 — 2024-06-27
- 1.1.10 — 2024-01-31
- 1.1.9 — 2024-01-10
- 1.1.8 — 2023-12-04
- 1.1.7 — 2023-12-04
- 1.1.6 — 2023-11-10
- 1.1.5 — 2023-10-26
- 1.1.3 — 2023-09-14
- 1.1.2 — 2023-09-11
- 1.1.1 — 2023-08-18
- 1.1.0 — 2023-06-28
- 1.0.0 — 2023-05-26

## README

# vite-plugin-scope-tailwind

[![NPM version][npm-image]][npm-url]
[![Downloads per month][downloads-image]][downloads-url]
[![GitHub Action Workflow Status][github-actions-workflow-image]][github-actions-workflow-url]
[![Known Vulnerabilities][snky-image]][snky-url]
[![PRs Welcome][pr-image]][pr-url]
[![codecov][codecov-image]][codecov-url]

> Encapsulate and scope your TailwindCSS styles to your library and prevent them affecting styles outside.

Love using TailwindCSS? Other people also love using TailwindCSS? Trying to mix them together? Usually this leads to problems as the tailwind classes such as `flex`, `bg-red-500` will clash and change specificity.

**Potential solutions**:

- A solution would be to [prefix your `TailwindCSS` styles in your libraries](https://stackoverflow.com/a/63770585), for example `my-lib-flex`, `my-lib-bg-red-500`, but this simply isn't good enough. The solution breaks down when there are multiple libraries using `TailwindCSS`. You would need a `prefix-` for each library. Unnecessary mental load.

- Another solution would be to [make the parent app important](https://stackoverflow.com/a/65907678). But this is an anti-pattern, and is a leaky abstraction. It is not feasible to tell all the consumers of your library to do this as a pre-requisite.

## Installation

```bash
npm i vite-plugin-scope-tailwind -D
```

## Usage

`vite-plugin-scope-tailwind` to the rescue!

This plugin scopes/encapsulates/contains all the `TailwindCSS` styles of your library all in, without any extra hacking around.

Add the `scopeTailwind` plugin into the `plugins` list in your `vite.config.js`:

```ts
import scopeTailwind from "vite-plugin-scope-tailwind";

export default defineConfig({
    ...
    plugins: [
        ...
        scopeTailwind(), // or scopeTailwind({ react: true }) for a React app
        ...
    ],
    ...
});
```

### Options

```ts
{
    react: boolean // If your app is a React app
    ignore: RegExp | RegExp[] | string | string[] // If you want to exclude some classes from being scoped
}
```

---

Made with ❤️

[npm-image]: https://badge.fury.io/js/vite-plugin-scope-tailwind.svg
[npm-url]: https://npmjs.org/package/vite-plugin-scope-tailwind
[downloads-image]: https://img.shields.io/npm/dm/vite-plugin-scope-tailwind.svg
[downloads-url]: https://npmjs.org/package/vite-plugin-scope-tailwind
[github-actions-workflow-image]: https://github.com/dolanmiu/vite-plugin-scope-tailwind/workflows/Tests%20&%20Build/badge.svg
[github-actions-workflow-url]: https://github.com/dolanmiu/vite-plugin-scope-tailwind/actions
[snky-image]: https://snyk.io/test/github/dolanmiu/vite-plugin-scope-tailwind/badge.svg
[snky-url]: https://snyk.io/test/github/dolanmiu/vite-plugin-scope-tailwind
[pr-image]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg
[pr-url]: http://makeapullrequest.com
[codecov-image]: https://codecov.io/gh/dolanmiu/vite-plugin-scope-tailwind/branch/master/graph/badge.svg
[codecov-url]: https://codecov.io/gh/dolanmiu/vite-plugin-scope-tailwind

---
_Source: https://npm.io/package/vite-plugin-scope-tailwind · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._