@darkoto/gulp-template-cli 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [year] [fullname]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,171 @@
+# @darkoto/gulp-template-cli
+
+A CLI feature installer for [gulp-template](#). Instead of keeping a
+`.template/` folder with setup scripts inside every cloned project,
+the scripts live in a standalone package and copy the files you need
+(configs, gulp tasks, styles, demo pages) directly into your project
+on demand — patching `gulpfile.js` and `head.html` automatically.
+
+## Why this exists
+
+Normally a template's `.template/` setup folder gets copied along with
+the whole repository into every new project. That causes a few problems:
+
+- fixes/updates to the scripts have to be manually propagated to every
+  project that was already started from the template;
+- adding a new feature (another tool, another integration) means
+  copying a folder into each project separately;
+- dead setup-script code sits in the project repo forever, even after
+  the feature has long been installed.
+
+`@darkoto/gulp-template-cli` fixes this: the scripts live in one place,
+versioned via npm/semver, while the project only ends up with the
+**results** of running them — actual config files, styles, gulp tasks.
+
+## Installation
+
+```bash
+npm install @darkoto/gulp-template-cli --save-dev
+# or with pnpm
+pnpm add -D @darkoto/gulp-template-cli
+```
+
+> Run the command from the **root of your project** — all paths
+> (`src/`, `gulp/`, `gulpfile.js`, etc.) are resolved relative to
+> `process.cwd()`.
+
+## Usage
+
+```bash
+# interactive feature picker
+npx template-add
+
+# run a specific feature directly
+npx template-add tailwind
+```
+
+## Available features
+
+| Feature | What it does |
+|---|---|
+| `tailwind` | Installs Tailwind CSS (via a pnpm package or CDN), creates the config and stylesheet, adds a gulp task, patches `gulpfile.js` and `head.html`, and copies a demo page |
+
+The feature list is generated automatically from the contents of the
+`setup/` folder — new features show up in the CLI without any changes
+to the tool itself (see [Adding a new feature](#adding-a-new-feature)).
+
+## How it works
+
+```
+gulp-template-cli/
+├── bin/
+│   └── cli.js              ← entry point, discovers features automatically
+├── paths.js                ← resolvePath/srcPath — resolved from the project's cwd
+├── helpers.js               ← log, copyTemplate, safeReplace, etc.
+├── setup-env.js             ← loads the consuming project's .env
+└── setup/
+    └── tailwind/
+        ├── config.js        ← paths, flags, versions for this feature
+        ├── setup.js         ← export async function setup() { ... }
+        └── templates/       ← files that get copied into the project
+```
+
+`bin/cli.js` knows nothing about specific features — it scans `setup/*`
+and picks up any folder that has a `setup.js` exporting `setup()`.
+
+### An important note about paths
+
+`paths.js` resolves everything from `process.cwd()`, not from the
+package's own location. This is intentional: the package physically
+lives in `node_modules` (or the npx cache), but it needs to operate on
+files belonging to the **consuming project**, not on its own files.
+
+The one exception is `helpers.js#copyTemplate`, which looks up template
+files (`setup/<feature>/templates/*`) relative to **the package itself**
+(via `import.meta.url`), since those are static assets that physically
+ship inside `@darkoto/gulp-template-cli`, not inside the consumer's
+project.
+
+## Adding a new feature
+
+1. Create `setup/<feature>/config.js`, `setup/<feature>/setup.js`, and
+   `setup/<feature>/templates/`.
+2. In `setup.js`, export:
+   ```js
+   export async function setup() {
+     // ...
+   }
+   ```
+3. Use the shared utilities via relative imports:
+   ```js
+   import { resolvePath } from '../../paths.js';
+   import { log, copyTemplate, safeReplace } from '../../helpers.js';
+   ```
+4. Nothing else needs to change — `bin/cli.js` will pick up the new
+   feature automatically the next time `template-add` runs.
+
+## Requirements
+
+- Node.js ≥ 18
+- The target project must use ESM (`"type": "module"` in `package.json`)
+- Expected project structure: `src/html/layouts/head.html`, a
+  `gulpfile.js` with the anchor comments
+  `// Tasks plugins (tailwind, etc.)`, `// Plugins watcher`, and
+  `mainTasks`/`buildTasks` defined as `gulp.parallel(...)`
+
+## Known issues (Windows + pnpm)
+
+### `pnpm link --global` fails with `Symlink path is the same as the target path`
+
+This is a bug in pnpm's `--global` linking mechanism on Windows, not
+related to the package itself. Workaround — use the `link:` protocol
+directly in the consuming project's `package.json`, bypassing the
+global store entirely:
+
+```json
+{
+  "devDependencies": {
+    "@darkoto/gulp-template-cli": "link:../gulp-template-cli"
+  }
+}
+```
+
+```bash
+pnpm install
+```
+
+### `WARN has no binaries` when linking
+
+Usually means the `bin` path in `package.json` isn't resolving
+correctly (make sure the path has no leading `./`, the file uses LF
+line endings, and starts with the shebang `#!/usr/bin/env node` on the
+very first line). Until that's sorted out, you can call the CLI
+directly:
+
+```bash
+node ./node_modules/@darkoto/gulp-template-cli/bin/cli.js tailwind
+```
+
+## Development
+
+```bash
+git clone https://github.com/darkoto/gulp-template-cli.git
+cd gulp-template-cli
+npm install
+node bin/cli.js
+```
+
+For local testing against a real project, use the `link:` approach
+above instead of `npm/pnpm link --global`.
+
+### Releasing a new version
+
+```bash
+npm version patch   # patch | minor | major
+git push --tags
+npm publish --access public
+```
+
+## License
+
+MIT

package/bin/cli.js

@@ -0,0 +1,78 @@
+#!/usr/bin/env node
+
+/**
+ * gulp-template-cli
+ * Usage:
+ *   npx gulp-template-cli            → interactive feature picker
+ *   npx gulp-template-cli tailwind   → run a specific feature directly
+ *
+ * Add a new feature by dropping a folder under setup/<name>/
+ * with a config.js, setup.js (exporting `setup()`), and templates/.
+ * No changes to this file are needed — features are discovered automatically.
+ */
+
+import { existsSync, readdirSync, statSync } from 'fs';
+import path from 'path';
+import { fileURLToPath, pathToFileURL } from 'url';
+import { select } from '@inquirer/prompts';
+
+// __dirname here = location of THIS package (bin/), not the consuming project.
+// We need this to discover which setup/<feature> folders ship with the package.
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const setupDir = path.join(__dirname, '..', 'setup');
+
+function listFeatures() {
+  return readdirSync(setupDir).filter(name => {
+    const full = path.join(setupDir, name);
+    return statSync(full).isDirectory() && existsSync(path.join(full, 'setup.js'));
+  });
+}
+
+async function runFeature(name) {
+  const setupPath = path.join(setupDir, name, 'setup.js');
+
+  if (!existsSync(setupPath)) {
+    console.error(`\n  ✗ Unknown feature: "${name}"`);
+    console.log(`  Available: ${listFeatures().join(', ')}\n`);
+    process.exit(1);
+  }
+
+  const mod = await import(pathToFileURL(setupPath).href);
+
+  if (typeof mod.setup !== 'function') {
+    console.error(`\n  ✗ setup/${name}/setup.js does not export a "setup" function.\n`);
+    process.exit(1);
+  }
+
+  await mod.setup();
+}
+
+async function main() {
+  const featureArg = process.argv[2];
+
+  if (featureArg) {
+    await runFeature(featureArg);
+    return;
+  }
+
+  const features = listFeatures();
+
+  if (features.length === 0) {
+    console.log('\n  No features found under setup/.\n');
+    return;
+  }
+
+  const feature = await select({
+    message: 'What do you want to add to your project?',
+    choices: features.map(name => ({ name, value: name })),
+  });
+
+  await runFeature(feature);
+}
+
+main()
+  .then(() => process.exit(0))
+  .catch(err => {
+    console.error('\n  ✗ Unexpected error:', err.message);
+    process.exit(1);
+  });

package/helpers.js

@@ -0,0 +1,128 @@
+import readline from 'readline';
+import path from 'path';
+import fs from 'fs';
+import http from 'http';
+import { exec } from 'child_process';
+import { fileURLToPath } from 'node:url';
+import { srcPath } from './paths.js';
+
+// ─────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────
+
+// __dirname here refers to THIS package's own location (not cwd).
+// Correct on purpose: templates/ are static assets shipped with the
+// package, they must be found regardless of which project invokes it.
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// Log
+export function log(message, type = 'info') {
+  const icons = { info: '◦', success: '✓', error: '✗', skip: '−' };
+  console.log(`    ${icons[type]} ${message}`);
+}
+
+// Get absolute path from relative parts (relative to the CONSUMING project)
+export function getSourcePath(...parts) {
+  return srcPath(...parts);
+}
+
+// Copy template file to destination
+export function copyTemplate(folderName, templateName, destPath) {
+  const templatesDir = path.join(
+    __dirname,
+    'setup',
+    folderName,
+    'templates',
+  );
+
+  const src = path.join(templatesDir, templateName);
+
+  if (!fs.existsSync(src)) {
+    log(`Template "${templateName}" not found.`, 'error');
+    return false;
+  }
+
+  if (fs.existsSync(destPath)) {
+    log(`${path.basename(destPath)} already exists.`, 'skip');
+    return false;
+  }
+
+  const dir = path.dirname(destPath);
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+
+  fs.copyFileSync(src, destPath);
+  log(`Created ${path.basename(destPath)}.`, 'success');
+  return true;
+}
+
+// Open browser with given URL
+export function openBrowser(url) {
+  const cmd =
+    process.platform === 'win32'
+      ? 'start'
+      : process.platform === 'darwin'
+        ? 'open'
+        : 'xdg-open';
+  exec(`${cmd} ${url}`);
+}
+
+// Check if dev server is running.
+// `server` = { host, port } — pass it explicitly instead of relying
+// on a specific feature's config (helpers.js is shared across all features).
+export function isServerRunning(server) {
+  return new Promise(resolve => {
+    const req = http.get(`http://${server.host}:${server.port}`, () => {
+      resolve(true);
+    });
+    req.on('error', () => resolve(false));
+    req.setTimeout(1000, () => {
+      req.destroy();
+      resolve(false);
+    });
+  });
+}
+
+// Reload server via BrowserSync endpoint
+export function reloadServer(server) {
+  return new Promise(resolve => {
+    const url = `http://${server.host}:${server.port}/__browser_sync__?method=reload`;
+    http
+      .get(url, () => {
+        log('Server reloaded.', 'success');
+        resolve();
+      })
+      .on('error', () => {
+        log('Could not reload server.', 'error');
+        resolve();
+      });
+  });
+}
+
+// Replace with validation
+export const safeReplace = (
+  content,
+  pattern,
+  replacement,
+  description,
+) => {
+  const nextContent = content.replace(pattern, replacement);
+
+  if (nextContent === content) {
+    log(
+      `Could not ${description} — gulpfile format may have changed.`,
+      'error',
+    );
+
+    return {
+      success: false,
+      content,
+    };
+  }
+
+  return {
+    success: true,
+    content: nextContent,
+  };
+};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@darkoto/gulp-template-cli",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Feature pnpm installer CLI for gulp-template — adds tailwind, etc. on demand into the target project.",
+  "bin": {
+    "template-add": "bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "setup",
+    "paths.js",
+    "helpers.js",
+    "setup-env.js"
+  ],
+  "keywords": ["gulp", "cli", "tailwind", "scaffolding", "template"],
+  "license": "MIT",
+  "author": "Darkoto darkoto12@gmail.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/darkoto/gulp-template-cli.git"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@inquirer/prompts": "^7.0.0",
+    "dotenv": "^16.4.5"
+  }
+}

package/paths.js

@@ -0,0 +1,71 @@
+/**
+ * Template Paths
+ * Utilities for setup scripts in setup/*
+ *
+ * IMPORTANT: rootDir = process.cwd(), NOT __dirname.
+ * This package can live in node_modules or npx cache —
+ * paths must resolve relative to the CONSUMING project,
+ * not to where this package physically sits.
+ * Run the CLI from the project root.
+ */
+
+import path from 'path';
+
+const rootDir = process.cwd();
+
+// Directory names (mirrors gulp/configs/paths.js in the target project)
+const folders = {
+  src: 'src',
+  styles: 'styles',
+  scripts: 'scripts',
+  html: 'html',
+  layouts: 'layouts',
+  pages: 'pages',
+  components: 'components',
+};
+
+// ─────────────────────────────────────────────────────────────
+// Path Helpers
+// ─────────────────────────────────────────────────────────────
+
+/**
+ * Path relative to project root (cwd)
+ */
+export const resolvePath = (...parts) => path.join(rootDir, ...parts);
+
+/**
+ * Path to source files
+ */
+export const srcPath = (...parts) => resolvePath(folders.src, ...parts);
+
+/**
+ * Path to gulp tasks
+ */
+export const gulpPath = (...parts) => resolvePath('gulp', ...parts);
+
+// ─────────────────────────────────────────────────────────────
+// Export
+// ─────────────────────────────────────────────────────────────
+
+export const templatePaths = {
+  root: rootDir,
+
+  // Computed paths
+  src: srcPath(),
+  srcStyles: srcPath(folders.styles),
+  srcScripts: srcPath(folders.scripts),
+  srcHtml: srcPath(folders.html),
+  srcHtmlLayouts: srcPath(folders.html, folders.layouts),
+  srcHtmlPages: srcPath(folders.html, folders.pages),
+  srcHtmlComponents: srcPath(folders.html, folders.components),
+
+  // Gulp
+  gulpTasks: gulpPath('tasks'),
+  gulpConfigs: gulpPath('configs'),
+  gulpUtils: gulpPath('utils'),
+
+  // Helpers
+  resolvePath,
+  srcPath,
+  gulpPath,
+};

package/setup/tailwind/config.js

@@ -0,0 +1,112 @@
+/**
+ * Tailwind Setup Configuration
+ *
+ * Note: dotenv is loaded via setup-env.js (imported first in setup.js).
+ * Do NOT import dotenv here — ESM static imports evaluate before side effects.
+ */
+
+// Directory names (mirrors gulp/configs/paths.js)
+const folders = {
+  gulp: 'gulp',
+  tasks: 'tasks',
+  src: 'src',
+  styles: 'styles',
+  scripts: 'scripts',
+  html: 'html',
+  layouts: 'layouts',
+  pages: 'pages',
+};
+
+export { folders };
+
+// ─────────────────────────────────────────────────────────────
+// Package
+// ─────────────────────────────────────────────────────────────
+
+export const folderName = 'tailwind';
+export const packageName = 'tailwindcss';
+export const version = '3.4.17';
+
+// ─────────────────────────────────────────────────────────────
+// Server
+// ─────────────────────────────────────────────────────────────
+
+export const server = {
+  port: process.env.PORT || 3000,
+  host: process.env.HOST || 'localhost',
+};
+
+// ─────────────────────────────────────────────────────────────
+// Files
+// ─────────────────────────────────────────────────────────────
+
+export const files = {
+  tailwindConfigModule: 'tailwind.config.module.js',
+  tailwindConfigCdn: 'tailwind.config.cdn.js',
+  tailwindConfig: 'tailwind.config.js',
+  tailwindCSS: 'tailwind.css',
+  tailwindDemo: 'tailwind.html',
+  tailwindTask: 'tailwind.js',
+  head: 'head.html',
+};
+
+// ─────────────────────────────────────────────────────────────
+// Paths
+// ─────────────────────────────────────────────────────────────
+
+export const paths = {
+  // Where to create tailwind config
+  configModule: {
+    dest: './',
+    filename: files.tailwindConfigModule,
+  },
+  configCdn: {
+    dest: `${folders.src}/${folders.scripts}/`,
+    filename: files.tailwindConfigCdn,
+  },
+
+  // Where to create tailwind styles
+  styles: {
+    dest: `${folders.src}/${folders.styles}/`,
+    filename: files.tailwindCSS,
+  },
+
+  // Gulp task file
+  gulpTask: {
+    dest: `${folders.gulp}/${folders.tasks}/`,
+    filename: files.tailwindTask,
+  },
+
+  // HTML file to inject stylesheet link
+  head: `${folders.src}/${folders.html}/${folders.layouts}/${files.head}`,
+
+  // Demo page
+  demo: {
+    dest: `${folders.src}/${folders.html}/`,
+    filename: files.tailwindDemo,
+  },
+};
+
+// ─────────────────────────────────────────────────────────────
+// Options
+// ─────────────────────────────────────────────────────────────
+
+export const options = {
+  openBrowser: true,
+  copyDemoPage: true,
+  createStyles: true,
+  injectStylesheet: true,
+  injectCdn: true,
+  injectConfig: true,
+};
+
+// ─────────────────────────────────────────────────────────────
+// URLs
+// ─────────────────────────────────────────────────────────────
+
+export const urls = {
+  get demo() {
+    return `http://${server.host}:${server.port}/${paths.demo.filename}`;
+  },
+  docs: 'https://v3.tailwindcss.com',
+};

package/setup/tailwind/setup.js

@@ -0,0 +1,395 @@
+/**
+ * Tailwind CSS Setup Script (CLI)
+ * Run via: npx my-template-cli tailwind
+ */
+
+import fs from 'fs';
+import { execSync } from 'child_process';
+import * as config from './config.js';
+import { resolvePath } from '../../paths.js';
+import { select, confirm  } from '@inquirer/prompts';
+import {
+  log,
+  getSourcePath,
+  copyTemplate,
+  safeReplace,
+} from '../../helpers.js';
+
+// ─────────────────────────────────────────────────────────────
+// Setup Tasks
+// ─────────────────────────────────────────────────────────────
+
+function installPackage() {
+  log(`Installing ${config.packageName}@${config.version}...`, 'info');
+
+  try {
+    execSync(`pnpm i -D ${config.packageName}@${config.version}`, {
+      stdio: 'pipe',
+    });
+    log(`Installed ${config.packageName}@${config.version}.`, 'success');
+  } catch (err) {
+    log(
+      `Failed to install ${config.packageName}: ${err.message}`,
+      'error',
+    );
+    throw err;
+  }
+}
+
+function createConfig(provider = 'pnpm') {
+  let destPath;
+  if (provider === 'pnpm') {
+    destPath = resolvePath(
+      config.paths.configModule.dest,
+      config.files.tailwindConfig,
+    );
+    copyTemplate(
+      config.folderName,
+      config.paths.configModule.filename,
+      destPath,
+    );
+  } else if (provider === 'cdn') {
+    destPath = resolvePath(
+      config.paths.configCdn.dest,
+      config.files.tailwindConfig,
+    );
+    copyTemplate(
+      config.folderName,
+      config.paths.configCdn.filename,
+      destPath,
+    );
+  } else {
+    return log(`Invalid provider: ${provider}`, 'error');
+  }
+}
+
+function createStyles() {
+  if (!config.options.createStyles) return;
+
+  const destPath = getSourcePath(
+    config.folders.styles,
+    config.files.tailwindCSS,
+  );
+  copyTemplate(config.folderName, config.files.tailwindCSS, destPath);
+}
+
+function injectStylesheet() {
+  if (!config.options.injectStylesheet) return;
+
+  const headPath = resolvePath(config.paths.head);
+
+  if (!fs.existsSync(headPath)) {
+    log('head.html not found.', 'error');
+    return;
+  }
+
+  let content = fs.readFileSync(headPath, 'utf-8');
+
+  if (content.includes('tailwind.css')) {
+    log('Tailwind stylesheet already in head.html.', 'skip');
+    return;
+  }
+
+  const link = '<link rel="stylesheet" href="./styles/tailwind.css" />';
+
+  // Insert before the first stylesheet so Tailwind resets load first
+  if (content.includes('<link rel="stylesheet"')) {
+    content = content.replace(/(<link rel="stylesheet")/, `${link}\n$1`);
+  } else if (content.includes('</head>')) {
+    content = content.replace('</head>', `${link}\n</head>`);
+  } else {
+    content += `\n${link}\n`;
+  }
+
+  fs.writeFileSync(headPath, content);
+  log('Added Tailwind stylesheet to head.html.', 'success');
+}
+
+function injectCdn() {
+  if (!config.options.injectCdn) return;
+
+  const headPath = resolvePath(config.paths.head);
+
+  if (!fs.existsSync(headPath)) {
+    log('head.html not found.', 'error');
+    return;
+  }
+
+  let content = fs.readFileSync(headPath, 'utf-8');
+
+  if (content.includes('cdn.tailwindcss.com')) {
+    log('Tailwind CDN already in head.html.', 'skip');
+    return;
+  }
+
+  const link = '<script src="https://cdn.tailwindcss.com"></script>';
+
+  const result = safeReplace(
+    content,
+    /(<!-- CDN -->)/,
+    `$1\n${link}`,
+    'inject tailwind CDN',
+  );
+
+  if (!result.success) return;
+
+  content = result.content;
+  fs.writeFileSync(headPath, content);
+  log('Added Tailwind CDN to head.html.', 'success');
+}
+
+function injectConfig() {
+  if (!config.options.injectConfig) return;
+
+  const headPath = resolvePath(config.paths.head);
+
+  if (!fs.existsSync(headPath)) {
+    log('head.html not found.', 'error');
+    return;
+  }
+
+  let content = fs.readFileSync(headPath, 'utf-8');
+
+  if (content.includes('tailwind.config.js')) {
+    log('Tailwind config already in head.html.', 'skip');
+    return;
+  }
+
+  const link = '<script src="./scripts/tailwind.config.js"></script>';
+
+  const result = safeReplace(
+    content,
+    /(<!-- SCRIPTS -->)/,
+    `$1\n${link}`,
+    'inject tailwind config',
+  );
+
+  if (!result.success) return;
+
+  content = result.content;
+
+  fs.writeFileSync(headPath, content);
+  log('Added Tailwind config to head.html.', 'success');
+}
+
+function copyDemoPage() {
+  if (!config.options.copyDemoPage) return;
+
+  const destPath = getSourcePath(
+    config.folders.html,
+    config.folders.pages,
+    config.paths.demo.filename,
+  );
+  copyTemplate(config.folderName, config.files.tailwindDemo, destPath);
+}
+
+function createGulpTask() {
+  const destPath = resolvePath(
+    config.paths.gulpTask.dest,
+    config.paths.gulpTask.filename,
+  );
+  copyTemplate(config.folderName, config.files.tailwindTask, destPath);
+}
+
+function updateGulpfile() {
+  const gulpfilePath = resolvePath('gulpfile.js');
+
+  if (!fs.existsSync(gulpfilePath)) {
+    log('gulpfile.js not found.', 'error');
+    return;
+  }
+
+  let content = fs.readFileSync(gulpfilePath, 'utf-8');
+
+  // Check if already added
+  if (content.includes("from './gulp/tasks/tailwind.js'")) {
+    log('Tailwind already in gulpfile.js.', 'skip');
+    return;
+  }
+
+  // Add import
+  const importLine =
+    "import { tailwind, tailwindReload } from './gulp/tasks/tailwind.js';";
+
+  const resultImport = safeReplace(
+    content,
+    /(\/\/ Tasks plugins \(tailwind, etc\.\))/,
+    `$1\n${importLine}`,
+    'inject tailwind import',
+  );
+
+  if (!resultImport.success) return;
+
+  content = resultImport.content;
+
+  // Add to watch
+  const resultWatcher = safeReplace(
+    content,
+    /(\/\/ Plugins watcher)/,
+    `$1\n  gulp.watch(['tailwind.config.js', \`\${paths.srcStyles}/tailwind.css\`], gulp.series(tailwind, tailwindReload));`,
+    'add tailwind watcher',
+  );
+
+  if (!resultWatcher.success) return;
+
+  content = resultWatcher.content;
+
+  // Add to mainTasks
+  const resultMainTask = safeReplace(
+    content,
+    /(const\s+mainTasks\s*=\s*gulp\.parallel\([\s\S]*?)(\n\);)/,
+    `$1\n  tailwind,$2`,
+    'add tailwind to mainTasks',
+  );
+
+  if (!resultMainTask.success) return;
+
+  content = resultMainTask.content;
+
+  // Add to buildTasks
+  const resultBuildTask = safeReplace(
+    content,
+    /(const\s+buildTasks\s*=\s*gulp\.parallel\([\s\S]*?)(\n\);)/,
+    `$1\n  tailwind,$2`,
+    'add tailwind to buildTasks',
+  );
+
+  if (!resultBuildTask.success) return;
+
+  content = resultBuildTask.content;
+
+  fs.writeFileSync(gulpfilePath, content);
+  log('Updated gulpfile.js.', 'success');
+}
+
+function isInstalled(provider = 'pnpm') {
+  let configPath;
+
+  if (provider === 'pnpm')
+    configPath = resolvePath(
+      config.paths.configModule.dest,
+      config.paths.configModule.filename,
+    );
+  else if (provider === 'cdn')
+    configPath = resolvePath(
+      config.paths.configCdn.dest,
+      config.paths.configCdn.filename,
+    );
+  else {
+    return log(`Invalid provider: ${provider}`, 'error');
+  }
+
+  const headPath = resolvePath(config.paths.head);
+
+  // Check if config exists
+  if (fs.existsSync(configPath)) return true;
+
+  if (fs.existsSync(headPath)) {
+    const content = fs.readFileSync(headPath, 'utf-8');
+    if (content.includes('tailwind.css')) return true;
+    if (content.includes('cdn.tailwindcss.com')) return true;
+    if (content.includes('tailwind.config.js')) return true;
+  }
+
+  return false;
+}
+
+// ─────────────────────────────────────────────────────────────
+// Main
+// ─────────────────────────────────────────────────────────────
+
+export async function setup() {
+  const provider = await select({
+    message: 'Select Tailwind installation',
+    choices: [
+      { name: 'pnpm(npm)', value: 'pnpm' },
+      { name: 'cdn', value: 'cdn' },
+    ],
+  });
+
+  if (isInstalled(provider)) {
+    console.log('  ⚡ Tailwind CSS is already installed.\n');
+    console.log(
+      `  To reinstall, remove ${config.files.tailwindConfig} and tailwind link from head.html.\n`,
+    );
+    return;
+  }
+
+  switch (provider) {
+    case 'pnpm': {
+      console.log(`\n  🎨 Tailwind CSS v${config.version} Setup (CLI)\n`);
+
+      console.log('  This will:');
+      console.log(`    • Install ${config.packageName} package`);
+      console.log('    • Create tailwind.config.js');
+      console.log('    • Create tailwind.css in styles folder');
+      console.log('    • Add stylesheet link to head.html');
+      console.log('    • Create gulp task for Tailwind CLI');
+      console.log('    • Copy demo page');
+      console.log('    • Auto-generate rebuild kit in dist/\n');
+
+const confirmed = await confirm({ message: 'Do you want to continue?' });
+
+      if (!confirmed) {
+        console.log('\n  ❌ Setup cancelled.\n');
+        return;
+      }
+
+      console.log('\n  Installing...\n');
+
+      installPackage();
+      createConfig(provider);
+      createStyles();
+      createGulpTask();
+      updateGulpfile();
+      injectStylesheet();
+      copyDemoPage();
+
+      console.log(`\n  ✅ Done! Docs: ${config.urls.docs}\n`);
+
+      if (config.options.copyDemoPage) {
+        console.log('  💡 Run "pnpm dev" to view the demo page.\n');
+      }
+
+      break;
+    }
+    case 'cdn': {
+      console.log(`\n  🎨 Tailwind CSS v${config.version} Setup (CDN)\n`);
+
+      console.log('  This will:');
+      console.log('    • Create tailwind.config.js');
+      console.log('    • Create tailwind.css in styles folder');
+      console.log('    • Add stylesheet link to head.html');
+      console.log('    • Add CDN link to head.html');
+      console.log('    • Add Config link to head.html');
+      console.log('    • Copy demo page \n');
+
+      const confirmed = await confirm('Do you want to continue?');
+
+      if (!confirmed) {
+        console.log('\n  ❌ Setup cancelled.\n');
+        return;
+      }
+
+      console.log('\n  Installing...\n');
+
+      createConfig(provider);
+      createStyles();
+      injectStylesheet();
+      injectCdn();
+      injectConfig();
+      copyDemoPage();
+
+      console.log(`\n  ✅ Done! Docs: ${config.urls.docs}\n`);
+
+      if (config.options.copyDemoPage) {
+        console.log('  💡 Run "pnpm dev" to view the demo page.\n');
+      }
+      break;
+    }
+    default: {
+      console.log('Invalid selection. Exiting.');
+      break;
+    }
+  }
+}

package/setup/tailwind/templates/tailwind.config.cdn.js

@@ -0,0 +1,9 @@
+tailwind.config = {
+  theme: {
+    extend: {
+      colors: {},
+      fontFamily: {},
+      spacing: {},
+    },
+  },
+};

package/setup/tailwind/templates/tailwind.config.module.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js}'],
+  theme: {
+    extend: {
+      colors: {},
+      fontFamily: {},
+      spacing: {},
+    },
+  },
+  plugins: [],
+};

package/setup/tailwind/templates/tailwind.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {}
+
+@layer components {}
+
+@layer utilities {}

package/setup/tailwind/templates/tailwind.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  @@include("../layouts/head.html", {
+  "title": "Tailwind CSS Installed",
+  "image": "./assets/img/preview.webp"
+  })
+</head>
+
+<body class="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 flex items-center justify-center p-4">
+  <div class="text-center">
+    <svg class="w-24 h-24 mx-auto mb-6" viewBox="0 0 54 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M27 0C19.8 0 15.3 3.6 13.5 10.8C16.2 7.2 19.35 5.85 22.95 6.75C25.004 7.263 26.472 8.754 28.097 10.403C30.744 13.09 33.808 16.2 40.5 16.2C47.7 16.2 52.2 12.6 54 5.4C51.3 9 48.15 10.35 44.55 9.45C42.496 8.937 41.028 7.446 39.403 5.797C36.756 3.11 33.692 0 27 0ZM13.5 16.2C6.3 16.2 1.8 19.8 0 27C2.7 23.4 5.85 22.05 9.45 22.95C11.504 23.464 12.972 24.954 14.597 26.603C17.244 29.29 20.308 32.4 27 32.4C34.2 32.4 38.7 28.8 40.5 21.6C37.8 25.2 34.65 26.55 31.05 25.65C28.996 25.137 27.528 23.646 25.903 21.997C23.256 19.31 20.192 16.2 13.5 16.2Z"
+        fill="#38BDF8" />
+    </svg>
+
+    <h1 class="text-4xl font-bold text-white mb-4">Tailwind CSS</h1>
+
+    <p class="text-slate-400 text-lg mb-8">
+      Successfully installed via CLI
+    </p>
+
+    <a href="https://v3.tailwindcss.com/docs" target="_blank"
+      class="inline-flex items-center gap-2 bg-sky-500 hover:bg-sky-400 text-white font-semibold px-6 py-3 rounded-lg transition-colors">
+      <span>Documentation</span>
+
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+      </svg>
+    </a>
+  </div>
+</body>
+
+</html>

package/setup/tailwind/templates/tailwind.js

@@ -0,0 +1,106 @@
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import fs from 'fs';
+import path from 'path';
+
+const run = promisify(exec);
+
+export const tailwind = async () => {
+  const { paths, config } = globalThis.app;
+  const configPath = path.join(paths.root, 'tailwind.config.js');
+  const inputPath = path.join(paths.srcStyles, 'tailwind.css');
+
+  // Skip if tailwind is not set up
+  if (!fs.existsSync(configPath) || !fs.existsSync(inputPath)) return;
+
+  // Ensure output directory exists
+  fs.mkdirSync(paths.buildStyles, { recursive: true });
+
+  const outputPath = path.join(paths.buildStyles, 'tailwind.css');
+  const minify = config.env.isProd ? '--minify' : '';
+
+  // Compile Tailwind CSS via CLI
+  await run(`npx tailwindcss -i "${inputPath}" -o "${outputPath}" --config "${configPath}" ${minify}`.trim());
+
+  // Generate rebuild kit in dist/
+  generateRebuildKit(paths.build, configPath, inputPath);
+};
+
+function getInstalledVersion() {
+  try {
+    const pkgPath = path.resolve('node_modules/tailwindcss/package.json');
+    return JSON.parse(fs.readFileSync(pkgPath, 'utf-8')).version;
+  } catch {
+    return '3.4.17';
+  }
+}
+
+/**
+ * Generate self-contained rebuild kit in dist/
+ * Allows rebuilding Tailwind CSS without the full gulp-template setup
+ */
+function generateRebuildKit(distRoot, configPath, inputPath) {
+  // 1. Minimal package.json with tailwindcss dep and build script
+  const pkg = JSON.stringify(
+    {
+      private: true,
+      description: 'Tailwind CSS rebuild kit — run "npm install && npm run build:css"',
+      scripts: {
+        'build:css': 'npx tailwindcss -i tailwind.input.css -o styles/tailwind.css --minify',
+      },
+      devDependencies: {
+        tailwindcss: getInstalledVersion(),
+      },
+    },
+    null,
+    2
+  );
+  fs.writeFileSync(path.join(distRoot, 'package.json'), `${pkg}\n`);
+
+  // 2. Tailwind config with dist-specific content paths
+  let configContent = fs.readFileSync(configPath, 'utf-8');
+  configContent = configContent.replace(
+    /content:\s*\[.*?\]/s,
+    "content: ['./**/*.{html,php,js}', '!./node_modules/**']"
+  );
+  fs.writeFileSync(path.join(distRoot, 'tailwind.config.js'), configContent);
+
+  // 3. Input CSS (Tailwind directives)
+  fs.copyFileSync(inputPath, path.join(distRoot, 'tailwind.input.css'));
+
+  // 4. Rebuild instructions
+  const readme = [
+    '# Tailwind CSS — Rebuild Instructions',
+    '',
+    'This folder contains a pre-compiled `styles/tailwind.css`.',
+    'If you modify HTML/PHP files and need to update Tailwind CSS:',
+    '',
+    '## Quick Start',
+    '',
+    '```bash',
+    'npm install',
+    'npm run build:css',
+    '```',
+    '',
+    '## What This Does',
+    '',
+    '- Scans all `.html`, `.php`, `.js` files for Tailwind utility classes',
+    '- Generates an optimized `styles/tailwind.css` with only the classes you use',
+    '',
+    '## Files',
+    '',
+    '| File | Purpose |',
+    '| --- | --- |',
+    '| `package.json` | Dependencies and build script |',
+    '| `tailwind.config.js` | Tailwind configuration (theme, plugins) |',
+    '| `tailwind.input.css` | Source CSS with Tailwind directives |',
+    '| `styles/tailwind.css` | Compiled output (auto-generated) |',
+    '',
+  ].join('\n');
+  fs.writeFileSync(path.join(distRoot, 'TAILWIND.md'), readme);
+}
+
+export const tailwindReload = (done) => {
+  globalThis.app.plugins.browserSync.reload();
+  done();
+};