303bdd4544 | ||
---|---|---|
.. | ||
src | ||
.gitignore | ||
README.md | ||
package-lock.json | ||
package.json | ||
tsconfig.json | ||
vite.config.ts |
README.md
vite-plugin-scope-tailwind
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, for examplemy-lib-flex
,my-lib-bg-red-500
, but this simply isn't good enough. The solution breaks down when there are multiple libraries usingTailwindCSS
. You would need aprefix-
for each library. Unnecessary mental load. -
Another solution would be to make the parent app important. 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
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
:
import scopeTailwind from "vite-plugin-scope-tailwind";
export default defineConfig({
...
plugins: [
...
scopeTailwind(), // or scopeTailwind({ react: true }) for a React app
...
],
...
});
Options
{
react: boolean // If your app is a React app
ignore: RegExp | RegExp[] // If you want to exclude some classes from being scoped
}
Made with ❤️