initkit 1.2.1 → 1.2.3

package/README.md

@@ -751,6 +751,34 @@ initkit my-app --verbose
 
 ---
 
+## Recent Updates
+
+### Version 1.2.2 (January 2026)
+
+**Critical Bug Fixes:**
+
+- ✅ **Fixed Tailwind CSS installation** - Resolved issue where styling was not installed if no other addons were selected
+- ✅ **Fixed package manager compatibility** - All 4 package managers (npm, yarn, pnpm, bun) now work correctly with Tailwind CSS
+- ✅ **Fixed Next.js duplicate configs** - Prevents duplicate Tailwind config files in Next.js projects
+- ✅ **Improved file creation** - Uses proper fs-extra methods for reliable config file generation
+
+**What's Fixed:**
+
+- `hasAddons()` function now properly checks for styling configuration
+- Changed from unreliable `npx tailwindcss init` to direct config file creation
+- All package managers tested and verified working
+- Next.js now uses built-in Tailwind setup (no duplicates)
+
+**Testing:**
+
+- ✅ 4/4 package managers passing tests (npm, yarn, pnpm, bun)
+- ✅ Verified across React+Vite, Next.js, and Vue.js
+- ✅ No duplicate configuration files
+
+[View Full Changelog](./docs/CHANGELOG.md)
+
+---
+
 ## Contributing
 
 We welcome contributions! InitKit has comprehensive documentation to help you get started.
@@ -823,7 +851,7 @@ MIT © [Shirish Shrestha](https://github.com/shirishshrestha)
 - **Issues**: [GitHub Issues](https://github.com/shirishshrestha/initkit/issues)
 - **Discussions**: [GitHub Discussions](https://github.com/shirishshrestha/initkit/discussions)
 - **Documentation**: [Full Documentation](./docs/QUICK_START.md)
-- **Email**: your.email@example.com
+- **Email**: shirish.shrestha07@gmail.com
 
 ---
 

package/bin/index.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 /**
  * Entry point for the CLI application

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "initkit",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "type": "module",
   "description": "A modern CLI tool for scaffolding production-ready web projects with live npm version fetching, multiple frameworks, and best practices built-in",
   "main": "src/index.js",
@@ -61,16 +61,17 @@
   "dependencies": {
     "chalk": "^5.3.0",
     "commander": "^12.0.0",
+    "ejs": "^3.1.9",
+    "fs-extra": "^11.2.0",
+    "initkit": "^1.2.1",
     "inquirer": "^9.2.15",
     "ora": "^8.0.1",
-    "fs-extra": "^11.2.0",
-    "ejs": "^3.1.9",
     "validate-npm-package-name": "^5.0.0"
   },
   "devDependencies": {
+    "@types/node": "^20.11.5",
     "eslint": "^8.56.0",
-    "prettier": "^3.2.4",
     "jest": "^29.7.0",
-    "@types/node": "^20.11.5"
+    "prettier": "^3.2.4"
   }
 }

package/src/commands/create.js

@@ -239,115 +239,4 @@ function getInstallCommand(packageManager) {
   return commands[packageManager] || 'npm install';
 }
 
-/** * Display comprehensive success summary after project creation (LEGACY - DEPRECATED)
- * This function is kept for backward compatibility but is no longer used
- * @deprecated Use displaySuccessMessage instead
- */
-function displaySuccessSummary(answers, projectPath, _verbose = false) {
-  console.log('');
-  console.log(chalk.green('╔════════════════════════════════════════════════════════════╗'));
-  console.log(
-    chalk.green('║') +
-      chalk.green.bold('              ✨ Project Created Successfully! ✨           ') +
-      chalk.green('║')
-  );
-  console.log(chalk.green('╚════════════════════════════════════════════════════════════╝'));
-  console.log('');
-
-  // Project info section
-  console.log(chalk.cyan.bold('  📦 Project Information'));
-  console.log(chalk.white(`     ${chalk.gray('Name:')}        ${chalk.bold(answers.projectName)}`));
-  console.log(chalk.white(`     ${chalk.gray('Type:')}        ${answers.projectType}`));
-  console.log(
-    chalk.white(`     ${chalk.gray('Language:')}    ${answers.language || 'JavaScript'}`)
-  );
-
-  if (answers.frontend) {
-    console.log(chalk.white(`     ${chalk.gray('Frontend:')}    ${answers.frontend}`));
-  }
-
-  if (answers.backend) {
-    console.log(chalk.white(`     ${chalk.gray('Backend:')}     ${answers.backend}`));
-  }
-
-  if (answers.database && answers.database !== 'none') {
-    console.log(chalk.white(`     ${chalk.gray('Database:')}    ${answers.database}`));
-  }
-  console.log('');
-
-  // Location section
-  console.log(chalk.cyan.bold('  📁 Project Location'));
-  console.log(chalk.white(`     ${projectPath}`));
-  console.log('');
-
-  // Features section
-  if (answers.features && answers.features.length > 0) {
-    console.log(chalk.cyan.bold('  ⚙️  Configured Features'));
-    answers.features.forEach((feature) => {
-      console.log(chalk.white(`     ${chalk.green('✓')} ${feature}`));
-    });
-    console.log('');
-  }
-
-  // Additional libraries
-  if (answers.additionalLibraries && answers.additionalLibraries.length > 0) {
-    console.log(chalk.cyan.bold('  📚 Additional Libraries'));
-    answers.additionalLibraries.slice(0, 5).forEach((lib) => {
-      console.log(chalk.white(`     ${chalk.green('✓')} ${lib}`));
-    });
-    if (answers.additionalLibraries.length > 5) {
-      console.log(chalk.gray(`     ... and ${answers.additionalLibraries.length - 5} more`));
-    }
-    console.log('');
-  }
-
-  // Package manager info
-  const packagesInstalled = answers.installDependencies !== false;
-  if (packagesInstalled) {
-    console.log(chalk.cyan.bold('  📦 Dependencies'));
-    console.log(chalk.white(`     ${chalk.green('✓')} Installed with ${answers.packageManager}`));
-    console.log('');
-  }
-
-  // Next steps
-  console.log(chalk.cyan.bold('  🚀 Next Steps'));
-  console.log('');
-  console.log(chalk.white(`     ${chalk.yellow('1.')} Navigate to your project:`));
-  console.log(chalk.gray(`        cd ${answers.projectName}`));
-  console.log('');
-
-  if (!packagesInstalled) {
-    console.log(chalk.white(`     ${chalk.yellow('2.')} Install dependencies:`));
-    console.log(chalk.gray(`        ${answers.packageManager} install`));
-    console.log('');
-  }
-
-  const stepNum = packagesInstalled ? 2 : 3;
-  console.log(chalk.white(`     ${chalk.yellow(stepNum + '.')} Start development server:`));
-  console.log(
-    chalk.gray(
-      `        ${answers.packageManager} ${answers.packageManager === 'npm' ? 'run ' : ''}dev`
-    )
-  );
-  console.log('');
-
-  console.log(
-    chalk.white(`     ${chalk.yellow(stepNum + 1 + '.')} Read the README for more info:`)
-  );
-  console.log(chalk.gray(`        cat README.md`));
-  console.log('');
-
-  // Documentation link
-  console.log(chalk.cyan.bold('  📚 Documentation'));
-  console.log(chalk.white(`     Check out the README.md in your project folder`));
-  console.log(chalk.white(`     for setup instructions and best practices.`));
-  console.log('');
-
-  // Footer
-  console.log(chalk.green('  ─────────────────────────────────────────────────────────────'));
-  console.log(chalk.green.bold('           🎉 Happy coding! Your project is ready! 🎉'));
-  console.log(chalk.green('  ─────────────────────────────────────────────────────────────'));
-  console.log('');
-}
-
 export { createProject };

package/src/prompts/questions.js

@@ -1,5 +1,4 @@
 import chalk from 'chalk';
-import validateNpmName from 'validate-npm-package-name';
 import {
   validateProjectName,
   checkDirectoryExists,

package/src/utils/addonInstaller.js

@@ -24,13 +24,19 @@ export async function installAddons(projectPath, config) {
     additionalLibraries = [],
   } = config;
 
+  // Styling (MUST be installed before UI libraries like shadcn)
+  if (styling && styling !== 'none' && styling !== 'css') {
+    console.log(chalk.cyan('\n🎨 Installing styling solution...'));
+    await installStyling(projectPath, styling, config);
+  }
+
   // State Management
   if (stateManagement && stateManagement !== 'none') {
     console.log(chalk.cyan('\n📦 Installing state management...'));
     await installStateManagement(projectPath, stateManagement, config);
   }
 
-  // UI Library
+  // UI Library (must come AFTER styling, especially for shadcn which needs Tailwind)
   if (uiLibrary && uiLibrary !== 'none') {
     console.log(chalk.cyan('\n🎨 Installing UI library...'));
     await installUILibrary(projectPath, uiLibrary, config);
@@ -104,20 +110,147 @@ async function installStateManagement(projectPath, library, config) {
   }
 }
 
+/**
+ * Install styling solution
+ */
+async function installStyling(projectPath, styling, config) {
+  const { packageManager, frontend } = config;
+  const installCmd = getInstallCommand(packageManager);
+
+  switch (styling) {
+    case 'tailwind': {
+      // Next.js already includes Tailwind CSS when --tailwind flag is used
+      if (frontend === 'nextjs') {
+        console.log(chalk.dim('  Tailwind CSS already configured by Next.js'));
+        return;
+      }
+
+      console.log(chalk.dim('  Installing Tailwind CSS...'));
+      await execCommand(`${installCmd} -D tailwindcss postcss autoprefixer`, {
+        cwd: projectPath,
+      });
+
+      // Create Tailwind config files directly (more reliable than running init command)
+      console.log(chalk.dim('  Initializing Tailwind configuration...'));
+      const fsExtra = await import('fs-extra');
+      const fs = fsExtra.default;
+      const pathModule = await import('path');
+      const path = pathModule.default;
+
+      // Create tailwind.config.js with proper content paths
+      const tailwindConfigPath = path.join(projectPath, 'tailwind.config.js');
+      const tailwindConfig = `/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}`;
+      await fs.outputFile(tailwindConfigPath, tailwindConfig);
+
+      // Create postcss.config.js
+      const postcssConfigPath = path.join(projectPath, 'postcss.config.js');
+      const postcssConfig = `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}`;
+      await fs.outputFile(postcssConfigPath, postcssConfig);
+
+      // For Vite projects, update the main CSS file
+      if (frontend === 'react' || frontend === 'vue') {
+        // Create/update main CSS file with Tailwind directives
+        const cssPath = path.join(projectPath, 'src', 'index.css');
+        const tailwindDirectives = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`;
+        await fs.outputFile(cssPath, tailwindDirectives);
+      }
+      break;
+    }
+
+    case 'scss':
+    case 'sass':
+      console.log(chalk.dim('  Installing Sass...'));
+      await execCommand(`${installCmd} -D sass`, { cwd: projectPath });
+      break;
+
+    case 'styled-components':
+      console.log(chalk.dim('  Installing Styled Components...'));
+      await execCommand(`${installCmd} styled-components`, { cwd: projectPath });
+      if (config.language === 'typescript') {
+        await execCommand(`${installCmd} -D @types/styled-components`, {
+          cwd: projectPath,
+        });
+      }
+      break;
+
+    case 'emotion':
+      console.log(chalk.dim('  Installing Emotion...'));
+      await execCommand(`${installCmd} @emotion/react @emotion/styled`, {
+        cwd: projectPath,
+      });
+      break;
+
+    case 'css-modules':
+      // CSS Modules are built into Vite and Next.js, no installation needed
+      console.log(chalk.dim('  CSS Modules are built-in, no installation needed'));
+      break;
+
+    default:
+      console.log(chalk.yellow(`  Unknown styling solution: ${styling}`));
+  }
+}
+
 /**
  * Install UI library (some have their own CLIs!)
  */
 async function installUILibrary(projectPath, library, config) {
-  const { packageManager, language } = config;
+  const { packageManager } = config;
   const installCmd = getInstallCommand(packageManager);
 
   switch (library) {
     case 'shadcn':
-    case 'shadcn-ui':
+    case 'shadcn-ui': {
       console.log(chalk.dim('  Running shadcn-ui init...'));
-      // shadcn has its own CLI!
-      await execCommand(`npx shadcn@latest init -y`, { cwd: projectPath });
+
+      // Ensure tsconfig has path aliases for shadcn
+      const fsExtra = await import('fs-extra');
+      const fs = fsExtra.default;
+      const pathModule = await import('path');
+      const path = pathModule.default;
+      const tsconfigPath = path.join(projectPath, 'tsconfig.json');
+
+      if (await fs.pathExists(tsconfigPath)) {
+        const tsconfig = await fs.readJson(tsconfigPath);
+        if (!tsconfig.compilerOptions) tsconfig.compilerOptions = {};
+        if (!tsconfig.compilerOptions.baseUrl) tsconfig.compilerOptions.baseUrl = '.';
+        if (!tsconfig.compilerOptions.paths) tsconfig.compilerOptions.paths = {};
+        tsconfig.compilerOptions.paths['@/*'] = ['./src/*'];
+        await fs.writeJson(tsconfigPath, tsconfig, { spaces: 2 });
+      }
+
+      // shadcn has its own CLI! Use package manager's binary runner
+      const { packageManager } = config;
+      const execCmd =
+        packageManager === 'npm'
+          ? 'npx'
+          : packageManager === 'yarn'
+            ? 'yarn dlx'
+            : packageManager === 'pnpm'
+              ? 'pnpm dlx'
+              : packageManager === 'bun'
+                ? 'bunx'
+                : 'npx';
+      await execCommand(`${execCmd} shadcn@latest init -y`, { cwd: projectPath });
       break;
+    }
 
     case 'mui':
     case 'material-ui':
@@ -175,10 +308,20 @@ async function installORM(projectPath, orm, database, config) {
       await execCommand(`${installCmd} -D prisma`, { cwd: projectPath });
       await execCommand(`${installCmd} @prisma/client`, { cwd: projectPath });
 
-      // Initialize Prisma with database
+      // Initialize Prisma with database using package manager's binary runner
       const datasource = getDatasourceForPrisma(database);
       console.log(chalk.dim(`  Initializing Prisma with ${datasource}...`));
-      await execCommand(`npx prisma init --datasource-provider ${datasource}`, {
+      const execCmd =
+        packageManager === 'npm'
+          ? 'npx'
+          : packageManager === 'yarn'
+            ? 'yarn'
+            : packageManager === 'pnpm'
+              ? 'pnpm exec'
+              : packageManager === 'bun'
+                ? 'bunx'
+                : 'npx';
+      await execCommand(`${execCmd} prisma init --datasource-provider ${datasource}`, {
         cwd: projectPath,
       });
       break;
@@ -295,11 +438,22 @@ async function installTesting(projectPath, testingLibs, config) {
         });
         break;
 
-      case 'playwright':
+      case 'playwright': {
         console.log(chalk.dim('  Installing Playwright...'));
-        // Playwright has its own init CLI!
-        await execCommand(`npm init playwright@latest`, { cwd: projectPath });
+        // Playwright has its own init CLI! Use package manager's create command
+        const initCmd =
+          packageManager === 'npm'
+            ? 'npm init'
+            : packageManager === 'yarn'
+              ? 'yarn create'
+              : packageManager === 'pnpm'
+                ? 'pnpm create'
+                : packageManager === 'bun'
+                  ? 'bun create'
+                  : 'npm init';
+        await execCommand(`${initCmd} playwright@latest`, { cwd: projectPath });
         break;
+      }
 
       case 'cypress':
         console.log(chalk.dim('  Installing Cypress...'));
@@ -392,6 +546,7 @@ function getDriverForTypeORM(database) {
  */
 export function hasAddons(config) {
   return !!(
+    (config.styling && config.styling !== 'none' && config.styling !== 'css') ||
     (config.stateManagement && config.stateManagement !== 'none') ||
     (config.uiLibrary && config.uiLibrary !== 'none') ||
     (config.orm && config.orm !== 'none') ||

package/src/utils/frameworkBootstrap.js

@@ -14,7 +14,7 @@ import chalk from 'chalk';
  * @returns {Promise<void>}
  */
 export async function bootstrapWithOfficialCLI(projectPath, config) {
-  const { projectType, frontend, backend } = config;
+  const { projectType, frontend: _frontend, backend: _backend } = config;
 
   switch (projectType) {
     case 'frontend':
@@ -239,7 +239,7 @@ export async function bootstrapSvelte(projectPath, config) {
  * @param {Object} config - Configuration object
  */
 export async function bootstrapExpress(projectPath, config) {
-  const { language, packageManager = 'npm' } = config;
+  const { language } = config;
   const projectName = path.basename(projectPath);
   const parentDir = path.dirname(projectPath);
 

package/src/utils/templateGenerator.js

@@ -109,7 +109,7 @@ async function createFeatureBasedStructure(srcPath, config) {
 /**
  * Create component-based folder structure
  */
-async function createComponentBasedStructure(srcPath, config) {
+async function createComponentBasedStructure(srcPath, _config) {
   await fs.ensureDir(path.join(srcPath, 'components', 'ui'));
   await fs.ensureDir(path.join(srcPath, 'components', 'layout'));
   await fs.ensureDir(path.join(srcPath, 'components', 'forms'));

package/src/utils/versionFetcher.js

@@ -6,7 +6,7 @@ import https from 'https';
  * @returns {Promise<string>} Latest version number
  */
 export async function getLatestVersion(packageName) {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve) => {
     const url = `https://registry.npmjs.org/${packageName}/latest`;
 
     https
@@ -21,13 +21,13 @@ export async function getLatestVersion(packageName) {
           try {
             const json = JSON.parse(data);
             resolve(json.version || 'latest');
-          } catch (error) {
+          } catch (_error) {
             // If parsing fails, return 'latest' as fallback
             resolve('latest');
           }
         });
       })
-      .on('error', (error) => {
+      .on('error', () => {
         // On network error, return 'latest' as fallback
         console.warn(`Warning: Could not fetch version for ${packageName}, using 'latest'`);
         resolve('latest');