Skip to content

🧩 Extends the TailwindCSS plugin API and provides some utilities.

License

Notifications You must be signed in to change notification settings

siguici/plugwind

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

82 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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',
        );
      },
    );

📄 License

This project is licensed under the MIT License - see the LICENSE.md file for details.