HeroUI and Tailwind v4 Setup | Development

.github/workflows/auto-publish.yml

@@ -49,6 +49,7 @@ jobs:
         run: |
           # Configure npm to use GitHub Packages registry
           echo "@PrabothCharith:registry=https://npm.pkg.github.com" > .npmrc
+          echo "//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}" >> .npmrc
           # Temporarily change the package name to the scoped version for GPR
           npm pkg set name="@PrabothCharith/nxt-gen-cli"
           # Publish using the GH_TOKEN

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nxt-gen-cli",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "The ultimate Next.js scaffold CLI generator. Customize your stack with Prisma, React Query, Shadcn, HeroUI, and more in seconds.",
   "main": "dist/index.js",
   "type": "module",

src/lib/ast.ts

@@ -176,3 +176,33 @@ export async function configureTailwindForHeroUI(projectPath: string) {
 
   await sourceFile.save();
 }
+
+export async function configureGlobalCssForHeroUI(projectPath: string) {
+  const cssPath = path.join(projectPath, "src/app/globals.css");
+  if (!fs.existsSync(cssPath)) return;
+
+  let content = await fs.readFile(cssPath, "utf-8");
+
+  // Check if it's already configured to avoid duplication
+  if (content.includes("@plugin './hero.ts';")) return;
+
+  // Replace default tailwind import with v4 setup
+  // We assume standard create-next-app output which usually starts with directives
+  // Or just prepend/replace the top part.
+
+  const v4Setup = `@import "tailwindcss";
+@plugin './hero.ts';
+@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
+@custom-variant dark (&:is(.dark *));
+
+`;
+
+  if (content.includes('@import "tailwindcss";')) {
+    content = content.replace('@import "tailwindcss";', v4Setup);
+  } else {
+    // Fallback: Prepend if no standard import found (though unlikely in fresh v4 app)
+    content = v4Setup + content;
+  }
+
+  await fs.writeFile(cssPath, content);
+}

src/scaffold.ts

@@ -55,7 +55,11 @@ import {
   getDlxCommand,
   PackageManager,
 } from "./lib/pm.js";
-import { addProviderToLayout, configureTailwindForHeroUI } from "./lib/ast.js";
+import {
+  addProviderToLayout,
+  configureTailwindForHeroUI,
+  configureGlobalCssForHeroUI,
+} from "./lib/ast.js";
 import { DependencyCollector } from "./lib/deps.js";
 import prompts from "prompts";
 
@@ -244,6 +248,13 @@ export const scaffoldProject = async (
       } catch (error) {
         spinner.fail("Installation failed");
         console.log(chalk.red("\nError:"), error);
+
+        console.log(chalk.yellow("\nTroubleshooting Tips:"));
+        console.log(chalk.white("  • If you see 'EACCES' or permission errors, try running:"));
+        console.log(chalk.cyan("    sudo chown -R $(whoami) ~/.npm"));
+        console.log(chalk.white("  • If you see 'EEXIST' or cache errors, try:"));
+        console.log(chalk.cyan("    npm cache clean --force"));
+
         console.log(chalk.yellow("\nYou can install dependencies manually:"));
         console.log(chalk.cyan(`  cd ${projectName}`));
         console.log(chalk.cyan(`  ${pm} install`));
@@ -601,26 +612,17 @@ export function cn(...inputs: ClassValue[]) {
     const configExists = await fs.pathExists(tailwindConfigPath);
 
     if (!configExists) {
-      // Create a fresh config compatible with HeroUI
+      // Assuming Tailwind v4 if config is missing
+      // 1. Create hero.ts
       await fs.writeFile(
-        tailwindConfigPath,
-        `
-import type { Config } from "tailwindcss";
-import {heroui} from '@heroui/react';
-
-const config: Config = {
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx,mdx}",
-    "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}"
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [heroui()],
-};
-export default config;
-`
+        path.join(projectPath, "hero.ts"),
+        `import { heroui } from "@heroui/react";
+
+export default heroui();`
       );
+
+      // 2. Configure globals.css for v4
+      await configureGlobalCssForHeroUI(projectPath);
     } else {
       await configureTailwindForHeroUI(projectPath);
     }