create-vite-pp 🚀

Lightning-fast React + Vite + Tailwind CSS project generator

A powerful CLI tool that scaffolds a complete React project with Vite and Tailwind CSS v4 in under 30 seconds. Just answer 5 questions and start coding!

✨ Features

• 🚀 Ultra Fast Setup — Complete project in ~30 seconds
• 🔍 Smart Validation — Node.js version check, prerequisites check & name validation
• 🎯 Interactive CLI — User-friendly prompts with clear descriptions
• ⚡ Latest Tech Stack — Vite (latest), React 18, Tailwind CSS v4
• 📝 Language Choice — JavaScript or TypeScript
• 🗂️ Folder Structure Choice — Minimal, Standard, or Feature-based
• 🔀 Optional React Router — Layout, Home, About, NotFound pages + routes config
• 🌐 Optional Axios — Base instance with auth token and 401 error interceptors
• 🔐 Env File Setup — .env + .env.example generated automatically
• 🧹 Clean Boilerplate — No unnecessary demo code cluttering your start
• 📚 Auto Documentation — README reflecting exactly what was selected
• 🛡️ Error Handling — Graceful failures with helpful messages

🚀 Quick Start

# Using npx (recommended)
npx create-vite-pp

# Or install globally
npm install -g create-vite-pp
create-vite-pp

📋 Requirements

• Node.js v20.19 or v22.12 or higher (Vite requirement)
• npm ≥ 6.0.0

The CLI automatically checks Node.js version and npm availability before starting.

🎯 Usage

Simply run the command and answer 5 prompts:

$ npx create-vite-pp

==================================================
    🚀 React + Vite + Tailwind Setup
==================================================

? Project name: › my-awesome-app
? Language: › JavaScript / TypeScript
? Folder structure: › Minimal / Standard / Feature-based
? Add React Router? › Yes / No
? Add Axios? › Yes / No

ℹ  Starting setup...
⏳ Creating Vite project...
✓  Vite project created.
⏳ Installing react, react-dom, vite...
⏳ Installing tailwindcss, @tailwindcss/vite...
⏳ Installing react-router-dom...
⏳ Installing axios...
✓  All dependencies installed.
⏳ Setting up Tailwind CSS v4...
✓  Tailwind CSS v4 ready.
⏳ Creating folder structure (standard)...
✓  Folder structure ready (standard).
⏳ Setting up React Router...
✓  React Router ready (Layout, Home, About, NotFound, routes.jsx).
⏳ Setting up Axios...
✓  Axios ready (src/services/api.js).
⏳ Creating README...
✓  README created.

==================================================
    🎉 Setup Complete!
==================================================

  cd my-awesome-app
  npm run dev
  Open http://localhost:5173

🗂️ Folder Structure Options

Minimal

Only components/ and assets/ — you handle everything else.

src/
├── components/
├── assets/
├── App.jsx
├── index.css
└── main.jsx

Standard (default)

Separate folders for pages, hooks, utils, and services.

src/
├── assets/
├── components/
├── pages/
│   └── Home.jsx
├── hooks/
│   └── useExample.js
├── utils/
│   └── helpers.js
├── services/
│   └── api.js
├── App.jsx
├── index.css
└── main.jsx

Feature-based

Each feature owns its own components, hooks, and utils. Shared code lives in shared/.

src/
├── assets/
├── features/
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   └── utils/
│   └── dashboard/
│       ├── components/
│       ├── hooks/
│       └── utils/
├── shared/
│   ├── components/
│   ├── hooks/
│   └── utils/
├── App.jsx
├── index.css
└── main.jsx

🔀 React Router (Optional)

When enabled, the CLI sets up a complete routing system:

| File | What it does | | --------------------------- | ---------------------------------------------------- | | src/components/Layout.jsx | Wraps all pages — navbar, footer, <Outlet /> | | src/pages/Home.jsx | Home page stub | | src/pages/About.jsx | About page stub | | src/pages/NotFound.jsx | 404 page with back-to-home link | | src/routes.jsx | All routes in one place using createBrowserRouter | | src/main.jsx | Patched to use RouterProvider instead of <App /> |

Add new pages by creating a file in src/pages/ and adding a route entry in src/routes.jsx.

🌐 Axios (Optional)

When enabled, the CLI generates src/services/api.js (or .ts) with:

• Base URL read from VITE_API_URL in your .env
• Request interceptor — attaches Bearer <token> from localStorage to every request
• Response interceptor — clears the token and redirects to /login on 401

import api from "./services/api";

// Use it like a normal axios instance
const { data } = await api.get("/users");
await api.post("/login", { email, password });

If Axios is not selected, a lightweight fetch-based api.js stub is written to services/ instead (Standard structure only).

🔐 Environment Variables

Every project gets two env files:

| File | Purpose | | -------------- | ---------------------------------------------------------------- | | .env | Your local values — gitignored | | .env.example | Template committed to git — shows teammates what vars are needed |

The only variable included by default is VITE_API_URL, used by the Axios instance.

All Vite env vars must start with VITE_ to be accessible in the browser.

⚙️ Tailwind CSS v4

The CLI uses the new Tailwind CSS v4 setup:

• Installed as tailwindcss + @tailwindcss/vite (no PostCSS, no config file needed)
• vite.config.js is automatically patched to include the Tailwind Vite plugin
• src/index.css uses the new single-line import:

@import "tailwindcss";

No tailwind.config.js is generated — v4 works without one.

🛠️ What Gets Installed

Always

| Package | Role | | ---------------------------------- | ---------- | | react, react-dom | Core React | | vite | Build tool | | tailwindcss, @tailwindcss/vite | Styling |

Optional

| Package | When | | ------------------ | --------------------- | | react-router-dom | React Router selected | | axios | Axios selected |

🚦 Available Scripts

After project creation:

npm run dev      # Start development server
npm run build    # Build for production
npm run preview  # Preview production build
npm run lint     # Run ESLint

🔍 Validation

Project Name

• Non-empty
• Only letters, numbers, hyphens, and underscores
• No existing directory conflict

Node.js Version

• Must be v20.19+ or v22.12+ (Vite requirement)
• Clear error with download link if version is unsupported

🐛 Troubleshooting

npm ERR! EACCES: permission denied

npm config set prefix ~/.npm-global
export PATH=~/.npm-global/bin:$PATH

Command 'create-vite-pp' not found

npm install -g create-vite-pp
# OR
npx create-vite-pp

Node.js version not supported Download the latest LTS from nodejs.org. Vite requires v20.19 or v22.12 or higher.

Slow installation

npm config set registry https://registry.npmjs.org/

📊 Performance

• Setup Time — ~30 seconds
• Node.js Requirement — v20.19 or v22.12+
• Cross-Platform — ✅ Windows, macOS, Linux

📝 Changelog

v2.0.0

• ✅ Upgraded to Tailwind CSS v4 (@tailwindcss/vite, no PostCSS, no config file)
• ✅ Added Node.js version validation (v20.19 / v22.12+ required)
• ✅ Added folder structure choice: Minimal, Standard, Feature-based
• ✅ Added optional React Router (Layout, Home, About, NotFound, routes config)
• ✅ Added optional Axios (auth interceptor + 401 handler)
• ✅ Auto-generates .env and .env.example
• ✅ Smart stub generation (fetch-based API when Axios not selected)
• ✅ README reflects exactly what was selected during setup

v1.0.8

• ✅ Added TypeScript support
• ✅ Improved error handling
• ✅ Updated to TailwindCSS v3.4+
• ✅ Enhanced project validation
• ✅ Better README generation

v1.0.7

• ✅ Initial release
• ✅ Basic Vite + React + Tailwind setup
• ✅ Interactive CLI prompts

🤝 Contributing

git clone https://github.com/pritam-pauldev/create-vite-pp.git
cd create-vite-pp
npm install
npm link
create-vite-pp test-project

🔗 Related Projects

• Vite
• React
• Tailwind CSS
• React Router
• Axios

📄 License

MIT License — see the LICENSE file for details.

👨‍💻 Author

Pritam Paul

• GitHub: @pritam-pauldev
• LinkedIn: linkedin.com/in/pritam-dev
• Email: [email protected]

⭐ Star this repo if you found it helpful!

Made with ❤️ by Pritam Paul