🚀 Usage

Create a new SPFx project

npx create-spfx-tailwind-app MyProject

A modern CLI tool to scaffold SharePoint Framework (SPFx) projects with Tailwind CSS pre-configured --- no manual setup required.

✨ Features

• ⚡ One-command SPFx project creation\
• 🎨 Tailwind CSS ready out of the box\
• 🧠 Smart CLI (interactive prompts + flags)\
• 📦 Optional dependency installation\
• 🏗 Built for SPFx v1.22+ (Heft-based projects)\
• 🔁 No manual renaming required

📦 Usage

▶️ Create a project

npx create-spfx-tailwind-app MyProject

▶️ Or install globally

npm install -g create-spfx-tailwind-app
create-spfx-tailwind-app MyProject

⚙️ CLI Options

create-spfx-app <project-name> [options]

Options

• --no-install → Skip dependency installation

Example

create-spfx-app MyProject --no-install

🛠 After Project Creation

If you skipped install:

cd MyProject
npm install

▶️ Start Development

Run in two terminals:

# Terminal 1
npm run start

# Terminal 2 (Tailwind watcher)
npm run build:tailwind

🧱 Tech Stack

• SharePoint Framework (SPFx) v1.22+
• React
• Tailwind CSS
• Heft build system
• Node.js

📁 Project Structure

    MyProject/
├── .vscode/
├── config/
├── src/
├── teams/
├── temp/
├── .eslintrc.js
├── .gitignore
├── .yo-rc.json
├── package.json
├── package-lock.json
├── postcss.config.js
├── README.md
├── setup.js
├── tailwind.config.js
├── tsconfig.json

🎯 Why this tool?

The default SPFx generator:

yo @microsoft/sharepoint

❌ Requires manual setup
❌ No Tailwind support
❌ Repetitive configuration

This CLI solves that by:

✔ Automating setup
✔ Adding Tailwind out of the box
✔ Improving developer experience

📌 Prerequisites

• Node.js (v22 recommended)
• npm
• SPFx development environment

🧪 Example

npx create-spfx-tailwind-app MyProject

🧑‍💻 Author

Deependra Singh

📄 License

MIT License

⚠️ Disclaimer

This project is not officially affiliated with Microsoft.
Use at your own risk.

⭐ Contributing

Contributions are welcome!
Feel free to open issues or submit pull requests.

🔗 References

• https://learn.microsoft.com/sharepoint/dev/spfx/
• https://tailwindcss.com/
• https://heft.rushstack.io/

💬 Support

If you find this useful:

⭐ Star the repo
🔁 Share with your team

Happy coding 🚀