create-spfx-tailwind-app 1.0.10

package/Template/src/webparts/__PROJECT_NAME_LOWER__/__PROJECT_NAME__WebPart.manifest.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "aa77f8d0-89f1-4335-816c-cb8bffa03b3c",
+  "alias": "TemplateSpfxWebPart",
+  "componentType": "WebPart",
+
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
+  "manifestVersion": 2,
+
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false,
+  "supportedHosts": ["SharePointWebPart", "TeamsPersonalApp", "TeamsTab", "SharePointFullPage"],
+  "supportsThemeVariants": true,
+
+  "preconfiguredEntries": [{
+    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Advanced
+    "group": { "default": "Advanced" },
+    "title": { "default": "__PROJECT_NAME__" },
+    "description": { "default": "__PROJECT_NAME__ description" },
+    "officeFabricIconFontName": "Page",
+    "properties": {
+      "description": "__PROJECT_NAME__"
+    }
+  }]
+}

package/Template/src/webparts/__PROJECT_NAME_LOWER__/__PROJECT_NAME__WebPart.ts

@@ -0,0 +1,181 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import { Version } from '@microsoft/sp-core-library';
+import {
+  type IPropertyPaneConfiguration,
+  PropertyPaneTextField
+} from '@microsoft/sp-property-pane';
+import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
+import { SPHttpClient, SPHttpClientResponse } from "@microsoft/sp-http";
+import "../../tailwind.generated.css";
+import * as strings from 'TemplateSpfxWebPartStrings';
+import __PROJECT_NAME__ from "./components/__PROJECT_NAME__";
+import { I__PROJECT_NAME__Props } from './components/I__PROJECT_NAME__Props';
+import $ from "jquery";
+export interface I__PROJECT_NAME__WebPartProps {
+  description: string;
+}
+
+export default class __PROJECT_NAME__WebPart extends BaseClientSideWebPart<I__PROJECT_NAME__WebPartProps> {
+  private _isDarkTheme: boolean = false;
+  private _environmentMessage: string = "";
+  public getCurrentUserGroups(requester: SPHttpClient, siteUrl: string): any {
+    try {
+      return requester
+        .get(
+          `${siteUrl}/_api/web/currentuser/?$select=Title,Email,LoginName,Id&$expand=groups`,
+          SPHttpClient.configurations.v1,
+          {
+            headers: {
+              Accept: "application/json;odata=verbose",
+              "odata-version": "",
+            },
+          },
+        )
+        .then((response: SPHttpClientResponse) => {
+          return response.json();
+        })
+        .then((json: any) => {
+          return json;
+        });
+    } catch (error: any) {
+      console.log(
+        `Error occured in getEntity method in factory.ts. Error message: ${error.message}`,
+      );
+      throw error;
+    }
+  }
+
+  public render(): void {
+    this.getCurrentUserGroups(
+      this.context.spHttpClient,
+      this.context.pageContext.web.absoluteUrl,
+    ).then((currentUser: any) => {
+      const element: React.ReactElement<I__PROJECT_NAME__Props> =
+        React.createElement(__PROJECT_NAME__, {
+          newcontext: this.context,
+          newsiteUrl: this.context.pageContext.web.absoluteUrl,
+          newlistName: "",
+          newspHttpClient: this.context.spHttpClient,
+          newrelativeUrl: this.context.pageContext.web.serverRelativeUrl,
+          newcurrentUserId: currentUser?.d?.Id ? currentUser.d.Id : -1,
+          newcurrentUserName: currentUser?.d?.Title ? currentUser.d.Title : "",
+          newgroups: currentUser?.d?.Groups?.results || [],
+          newcurrentUserEmail: this.context.pageContext.user.email,
+        });
+
+      ReactDom.render(element, this.domElement);
+    });
+  }
+
+  protected onInit(): Promise<void> {
+    return super.onInit().then(() => {
+      document.title = "MIS Repository";
+
+      // Add body class safely
+      $("body").addClass("ms-backgroundImage");
+
+      // Inject CSS (FIXED - all rules together)
+      const style = document.createElement("style");
+      style.innerHTML = `
+      #spLeftNav,
+      #SuiteNavWrapper,
+      #CommentsWrapper,
+      #sp-appBar,
+      .headerRow-107,
+      .commandBarButtonHeightAndColor,
+      .fui-Toolbar,
+      .simpleFooterContainer-196,
+      .p_i-Dej_1x34n,
+      div[data-automation-id="pageHeader"],
+      div[data-automation-id="SiteHeader"],
+      div[data-automation-id="MegaFooter"],
+      div[data-automation-id="gradientBox"],
+      div[data-automation-id="LeftNavGroups"] {
+        display: none !important;
+      }
+    `;
+      document.head.appendChild(style);
+
+      // Delay + repeat (IMPORTANT for SPFx dynamic DOM)
+      const hideElements = () => {
+        $("div[data-automation-id='pageHeader']").hide();
+        $("div[data-automation-id='SiteHeader']").hide();
+        $("div[data-automation-id='SimpleFooter']").parent().hide();
+        $("div[data-automation-id='SiteHeaderOverlay']").parent().hide();
+        $("div[data-automation-id='MegaFooter']").hide();
+        $("div[data-automation-id='gradientBox']").parent().hide();
+        $("div[data-automation-id='LeftNavGroups']").parent().hide();
+
+        $("#spLeftNav").hide();
+        $("#SuiteNavWrapper").hide();
+        $("#CommentsWrapper").hide();
+        $("#sp-appBar").hide();
+
+        $(".headerRow-107").hide();
+        $(".commandBarButtonHeightAndColor").hide();
+        $(".fui-Toolbar").hide();
+      };
+
+      // Run multiple times (handles re-render)
+      const interval = setInterval(hideElements, 1000);
+
+      // Stop after 10 seconds (optional cleanup)
+      setTimeout(() => clearInterval(interval), 10000);
+
+     
+    });
+  }
+
+  protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void {
+    if (!currentTheme) {
+      return;
+    }
+
+    this._isDarkTheme = !!currentTheme.isInverted;
+    const { semanticColors } = currentTheme;
+
+    if (semanticColors) {
+      this.domElement.style.setProperty(
+        "--bodyText",
+        semanticColors.bodyText || null,
+      );
+      this.domElement.style.setProperty("--link", semanticColors.link || null);
+      this.domElement.style.setProperty(
+        "--linkHovered",
+        semanticColors.linkHovered || null,
+      );
+    }
+  }
+
+  protected onDispose(): void {
+    ReactDom.unmountComponentAtNode(this.domElement);
+  }
+
+  protected get dataVersion(): Version {
+    return Version.parse("1.0");
+  }
+
+  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+    return {
+      pages: [
+        {
+          header: {
+            description: strings.PropertyPaneDescription,
+          },
+          groups: [
+            {
+              groupName: strings.BasicGroupName,
+              groupFields: [
+                PropertyPaneTextField("description", {
+                  label: strings.DescriptionFieldLabel,
+                }),
+              ],
+            },
+          ],
+        },
+      ],
+    };
+  }
+}

package/Template/src/webparts/__PROJECT_NAME_LOWER__/components/I__PROJECT_NAME__Props.ts

@@ -0,0 +1,12 @@
+import { WebPartContext } from "@microsoft/sp-webpart-base";
+export interface I__PROJECT_NAME__Props {
+  newcontext: WebPartContext;
+  newsiteUrl: string;
+  newlistName: string;
+  newspHttpClient: any;
+  newrelativeUrl: string;
+  newcurrentUserId: number;
+  newgroups?: any;
+  newcurrentUserName: string;
+  newcurrentUserEmail: string;
+}

package/Template/src/webparts/__PROJECT_NAME_LOWER__/components/__PROJECT_NAME__.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const __PROJECT_NAME__ = () => {
+  return (
+    <div>__PROJECT_NAME__</div>
+  )
+}
+
+export default __PROJECT_NAME__;

package/Template/src/webparts/__PROJECT_NAME_LOWER__/loc/en-us.js

@@ -0,0 +1,16 @@
+define([], function() {
+  return {
+    "PropertyPaneDescription": "Description",
+    "BasicGroupName": "Group Name",
+    "DescriptionFieldLabel": "Description Field",
+    "AppLocalEnvironmentSharePoint": "The app is running on your local environment as SharePoint web part",
+    "AppLocalEnvironmentTeams": "The app is running on your local environment as Microsoft Teams app",
+    "AppLocalEnvironmentOffice": "The app is running on your local environment in office.com",
+    "AppLocalEnvironmentOutlook": "The app is running on your local environment in Outlook",
+    "AppSharePointEnvironment": "The app is running on SharePoint page",
+    "AppTeamsTabEnvironment": "The app is running in Microsoft Teams",
+    "AppOfficeEnvironment": "The app is running in office.com",
+    "AppOutlookEnvironment": "The app is running in Outlook",
+    "UnknownEnvironment": "The app is running in an unknown environment"
+  }
+});

package/Template/src/webparts/__PROJECT_NAME_LOWER__/loc/mystrings.d.ts

@@ -0,0 +1,19 @@
+declare interface ITemplateSpfxWebPartStrings {
+  PropertyPaneDescription: string;
+  BasicGroupName: string;
+  DescriptionFieldLabel: string;
+  AppLocalEnvironmentSharePoint: string;
+  AppLocalEnvironmentTeams: string;
+  AppLocalEnvironmentOffice: string;
+  AppLocalEnvironmentOutlook: string;
+  AppSharePointEnvironment: string;
+  AppTeamsTabEnvironment: string;
+  AppOfficeEnvironment: string;
+  AppOutlookEnvironment: string;
+  UnknownEnvironment: string;
+}
+
+declare module 'TemplateSpfxWebPartStrings' {
+  const strings: ITemplateSpfxWebPartStrings;
+  export = strings;
+}

package/Template/src/webparts/__PROJECT_NAME_LOWER__/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/Template/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{ts,tsx,js,jsx,html}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/Template/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./node_modules/@microsoft/spfx-web-build-rig/profiles/default/tsconfig-base.json"
+}

package/index.js

@@ -0,0 +1,137 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+const { execSync } = require("child_process");
+const chalk = require("chalk");
+const ora = require("ora");
+const inquirer = require("inquirer");
+const figlet = require("figlet");
+const gradient = require("gradient-string").default;
+
+// 🎨 Banner
+
+
+console.log(
+  gradient.instagram(figlet.textSync("SPFx CLI", { horizontalLayout: "full" })),
+);
+
+async function run() {
+  try {
+    const args = process.argv.slice(2);
+
+    // 🔹 detect flags
+    const noInstallFlag = args.includes("--no-install");
+
+    // 🔹 get project name
+    let projectName = args.find((arg) => !arg.startsWith("--"));
+
+    if (!projectName) {
+      const answer = await inquirer.prompt([
+        {
+          type: "input",
+          name: "name",
+          message: "Project name:",
+          default: "my-spfx-app",
+          validate: (input) => {
+            if (!input) return "Project name is required";
+            if (fs.existsSync(input)) return "Folder already exists";
+            return true;
+          },
+        },
+      ]);
+      projectName = answer.name;
+    }
+
+    const templateDir = path.join(__dirname, "Template");
+    const targetDir = path.join(process.cwd(), projectName);
+
+    console.log(chalk.cyan("\n🚀 Creating your SPFx project...\n"));
+
+    const spinner = ora("Copying template...").start();
+
+    // 📁 Copy template
+    fs.cpSync(templateDir, targetDir, { recursive: true });
+
+    spinner.text = "Customizing project...";
+
+    // ⚙ Run setup script
+    execSync(`node setup.js "${projectName}"`, {
+      cwd: targetDir,
+      stdio: "ignore",
+    });
+
+    spinner.succeed(chalk.green("✔ Project setup complete"));
+
+    // 🔍 detect Tailwind support
+    let hasTailwind = false;
+    try {
+      const pkg = require(path.join(targetDir, "package.json"));
+      hasTailwind = !!pkg.scripts?.["build:tailwind"];
+    } catch {}
+
+    // ❓ Ask install (unless flag used)
+    let install = true;
+
+    if (noInstallFlag) {
+      install = false;
+    } else {
+      const answer = await inquirer.prompt([
+        {
+          type: "confirm",
+          name: "install",
+          message: "Install dependencies now?",
+          default: true,
+        },
+      ]);
+      install = answer.install;
+    }
+
+    // 📦 Install dependencies
+    if (install) {
+      const installSpinner = ora("Installing dependencies...").start();
+
+      try {
+        execSync("npm install", {
+          cwd: targetDir,
+          stdio: "inherit",
+        });
+
+        installSpinner.succeed(chalk.green("✔ Dependencies installed"));
+      } catch (err) {
+        installSpinner.fail(chalk.red("❌ Installation failed"));
+      }
+    }
+
+    // 🎉 Success message
+    console.log("\n" + chalk.bold.green("🎉 Project created successfully!\n"));
+
+    console.log(chalk.yellow("👉 Next steps:"));
+    console.log(chalk.white(`   cd ${projectName}`));
+
+    if (!install) {
+      console.log(chalk.white("   npm install"));
+    }
+
+    console.log("");
+
+    console.log(chalk.yellow("👉 Start development:"));
+
+    console.log(chalk.cyan("   # Terminal 1"));
+    console.log(chalk.white("   npm run start"));
+
+    if (hasTailwind) {
+      console.log("");
+      console.log(chalk.cyan("   # Terminal 2"));
+      console.log(chalk.white("   npm run build:tailwind"));
+    }
+
+    console.log("\n" + chalk.gray("Happy coding 🚀\n"));
+  } catch (err) {
+    console.log(chalk.red("\n❌ Something went wrong\n"));
+    console.error(err);
+    process.exit(1);
+  }
+}
+
+run();

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "create-spfx-tailwind-app",
+  "engines": {
+    "node": ">=22"
+  },
+  "version": "1.0.10",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "spfx",
+    "sharepoint",
+    "tailwind",
+    "spfx tailwind",
+    "create spfx app",
+    "spfx cli"
+  ],
+  "files": [
+    "index.js",
+    "README.md",
+    "Template/**"
+  ],
+  "author": "Deependra Singh",
+  "license": "MIT",
+  "description": "CLI to scaffold SPFx projects with Tailwind CSS preconfigured",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/deependrasingh002/create-spfx-tailwind-app.git"
+  },
+  "homepage": "https://github.com/deependrasingh002/create-spfx-tailwind-app.git",
+  "bin": {
+    "create-spfx-app": "./index.js"
+  },
+  "dependencies": {
+    "chalk": "^4.1.2",
+    "figlet": "^1.11.0",
+    "gradient-string": "^3.0.0",
+    "inquirer": "^8.2.7",
+    "ora": "^5.4.1"
+  }
+}