https://github.com/siguici/plugwind
🧩 Extends the TailwindCSS plugin API and provides some utilities.
https://github.com/siguici/plugwind
plug plugger plugin-api plugin-manager plugwind plugwind-js tailwindcss-plugin
Last synced: 4 months ago
JSON representation
🧩 Extends the TailwindCSS plugin API and provides some utilities.
- Host: GitHub
- URL: https://github.com/siguici/plugwind
- Owner: siguici
- License: mit
- Created: 2024-06-12T19:37:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-21T11:48:58.000Z (over 1 year ago)
- Last Synced: 2025-04-06T21:26:16.258Z (10 months ago)
- Topics: plug, plugger, plugin-api, plugin-manager, plugwind, plugwind-js, tailwindcss-plugin
- Language: TypeScript
- Homepage: https://npm.im/plugwind.js
- Size: 106 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# [🧩 PlugWind](https://jsr.io/@siguici/plugwind)
[PlugWind](https://jsr.io/@siguici/plugwind) makes it easy to create TailwindCSS plugins.
## 🚀 Installation
You can install [`PlugWind`](https://github.com/siguici/plugwind) from [`NPM`](https://npmjs.com/package/plugwind.js) or [`JSR`](https://jsr.io/@siguici/plugwind):
- Using `npm`:
From [`NPM`](https://npmjs.com/package/plugwind.js):
```bash
npm install plugwind.js
```
From [`JSR`](https://jsr.io/@siguici/plugwind):
```bash
npx jsr add @siguici/plugwind
```
- Using `Yarn`:
From [`NPM`](https://npmjs.com/package/plugwind.js):
```bash
yarn add plugwind.js
```
From [`JSR`](https://jsr.io/@siguici/plugwind):
```bash
yarn dlx jsr add @siguici/plugwind
```
- Using `PNPM`:
From [`NPM`](https://npmjs.com/package/plugwind.js):
```bash
pnpm add plugwind.js
```
From [`JSR`](https://jsr.io/@siguici/plugwind):
```bash
pnpm dlx jsr add @siguici/plugwind
```
- Using `Bun`:
From [`NPM`](https://npmjs.com/package/plugwind.js):
```bash
bun install plugwind.js
```
From [`JSR`](https://jsr.io/@siguici/plugwind):
```bash
bunx jsr add @siguici/plugwind
```
- Using `Deno`:
From [`NPM`](https://npmjs.com/package/plugwind.js):
```bash
deno install npm:plugwind.js
```
From [`JSR`](https://jsr.io/@siguici/plugwind):
```bash
deno add @siguici/plugwind
```
Without install:
```typescript
import plugwind.js from 'jsr:@siguici/plugwind';
```
## 💡 Usage
- Import from `node_modules`:
```javascript
import plug from 'plugwind.js';
```
- Import without install (using `Deno`):
```javascript
import plug from 'jsr:@siguici/plugwind';
```
- Use the `plug` function to define a plugin:
```typescript
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:
```typescript
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](./LICENSE.md) for details.