Plugwind.js NPM

🧩 PlugWind

PlugWind makes it easy to create TailwindCSS plugins.

🚀 Installation

You can install PlugWind from NPM or JSR:

Using npm:

From NPM:

npm install plugwind.js

From JSR:

npx jsr add @siguici/plugwind

Using Yarn:

From NPM:

yarn add plugwind.js

From JSR:

yarn dlx jsr add @siguici/plugwind

Using PNPM:

From NPM:

pnpm add plugwind.js

From JSR:

pnpm dlx jsr add @siguici/plugwind

Using Bun:

From NPM:

bun install plugwind.js

From JSR:

bunx jsr add @siguici/plugwind

Using Deno:

From NPM:

deno install npm:plugwind.js

From JSR:

deno add @siguici/plugwind

Without install:

import plugwind.js from 'jsr:@siguici/plugwind';

💡 Usage

Import from node_modules:
```
import plug from 'plugwind.js';
```

Import without install (using Deno):

import plug from 'jsr:@siguici/plugwind';

Use the plug function to define a plugin:

export default plug((api) => {
  api.addBase(base);
  api.addTheme(theme, rule);
  api.addThemes(themes);
  api.addVar(varName, varValue);
  api.addVars(vars);
  api.addRoot(rule);
  api.addComponent(component, rule);
  api.addComponents(components);
  api.addUtility(utility, rule);
  api.addUtilities(utilities);
  api.addProperty(property, value, utility);
  api.addProperties(properties, utilities);
  api.addVariant(variants);
  api.addDark(component, darkRule, lightRule);
  api.addDarkVariant(component, darkRule, lightRule, variant);
  api.addDarkSelector(component, darkRule, lightRule, selector);
  api.addDarkClass(component, darkRule, lightRule, className);
  api.addDarkMedia(component, darkRule, lightRule);
  api.addGradient(color, name, to);
  api.addGradientFrom(color, name, to);
  api.addGradientVia(color, name, to);
  api.addGradientTo(color, name);
  api.addDarkGradient(darkColor, lightColor, colorName, toColor);
  api.addDarkGradientFrom(darkColor, lightColor, name, to);
  api.addDarkGradientVia(darkColor, lightColor, name, to);
  api.addDarkGradientTo(darkColor, lightColor, name);
});

Use the plug.with method to define a plugin with options:

export default plug.with<{ selector?: string; prefix?: string }>(
  (options) => (api) => {
    api.addVar(
      name,
      value,
      options.selector ?? ':root',
      options.prefix ?? 'tw',
    );
  },
);