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 in under 30 seconds. No more repetitive setup - just answer 2 questions and start coding!

✨ Features

• 🚀 Ultra Fast Setup - Complete project in 30 seconds
• 🔍 Smart Validation - Prerequisites check & name validation
• 🎯 Interactive CLI - User-friendly prompts with validation
• ⚡ Latest Tech Stack - Vite, React 18, TailwindCSS v3.4+
• 📝 Language Choice - JavaScript or TypeScript support
• 🎨 Zero Configuration - Perfect configs out of the box
• 🧹 Clean Boilerplate - No unnecessary code cluttering
• 📚 Auto Documentation - Comprehensive README generation
• 🛡️ Error Handling - Graceful failures with helpful messages
• 🔄 Latest Dependencies - Always uses current versions

🚀 Quick Start

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

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

📋 Requirements

• Node.js ≥ 14.0.0
• npm ≥ 6.0.0

The CLI automatically checks these prerequisites before starting.

🎯 Usage

Interactive Mode

Simply run the command and follow the prompts:

$ npx create-vite-pp

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

? Enter your project name: › my-awesome-app
? Select language: ›
❯ JavaScript
  TypeScript

✓ Prerequisites check passed
⏳ Creating Vite project...
✓ Vite project created successfully
⏳ Installing dependencies...
✓ Dependencies installed successfully
⏳ Setting up Tailwind CSS...
✓ Tailwind CSS setup completed
⏳ Updating App component...
✓ App component updated
⏳ Creating README...
✓ README created

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

Next steps:
  1. cd my-awesome-app
  2. npm run dev
  3. Open http://localhost:5173

✓ Your React + Vite + Tailwind project is ready!

Project Structure

The CLI creates a well-organized project structure:

my-awesome-app/
├── public/                 # Static assets
├── src/
│   ├── assets/            # Images, icons, etc.
│   ├── App.jsx (or .tsx)  # Main App component
│   ├── App.css           # Component styles
│   ├── index.css         # Global styles (Tailwind imports)
│   └── main.js (or .ts)  # Application entry point
├── index.html            # HTML template
├── package.json          # Dependencies and scripts
├── tailwind.config.js    # Tailwind configuration
├── postcss.config.js     # PostCSS configuration
├── vite.config.js        # Vite configuration
└── README.md            # Project documentation

🛠️ What Gets Installed

Core Dependencies

• React ^18.2.0 - Modern React with hooks
• React-DOM ^18.2.0 - React DOM renderer

Development Dependencies

• Vite ^5.0.0+ - Lightning-fast build tool
• TailwindCSS ^3.4.0 - Utility-first CSS framework
• @tailwindcss/postcss - PostCSS integration
• Autoprefixer - CSS vendor prefixes
• ESLint - Code linting (React configuration)

TypeScript (if selected)

• TypeScript ^5.0.0+ - Static type checking
• @types/react - React type definitions
• @types/react-dom - React DOM type definitions

⚙️ Configuration Details

Tailwind Configuration

// tailwind.config.js
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

PostCSS Configuration

// postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

CSS Setup

The generated src/index.css includes:

@tailwind base;
@tailwind components;
@tailwind utilities;

🎨 Clean Boilerplate

Unlike other generators, create-vite-pp provides a minimal, clean starting point:

function App() {
  return (
    <div className="min-h-screen relative bg-black">
      {/* Attribution */}
      <div className="fixed bottom-4 right-4 text-xs text-gray-400">
        — Pritam Paul —
      </div>
    </div>
  );
}

export default App;

Perfect for starting your project without removing unnecessary code!

🚦 Available Scripts

After project creation, you can run:

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run linting
npm run lint

🔍 Validation Features

Project Name Validation

• ✅ Non-empty names
• ✅ Valid characters (alphanumeric, hyphens, underscores)
• ✅ No directory conflicts
• ✅ Proper naming conventions

Prerequisites Check

• ✅ Node.js installation
• ✅ npm availability
• ✅ Version compatibility

🎯 Advanced Usage

Handling Errors

The CLI provides helpful error messages:

✗ Command failed: npm install
✗ Error: Network timeout

Interruption Handling

Safe interruption with Ctrl+C:

✗ Setup interrupted

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Development Setup

# Clone the repository
git clone https://github.com/pritam-pauldev/create-vite-pp.git
cd create-vite-pp

# Install dependencies
npm install

# Test locally
npm link
create-vite-pp test-project

Building

# Test the package
npm run start

# Publish to npm
npm publish

📝 Changelog

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

🐛 Troubleshooting

Common Issues

Issue: npm ERR! EACCES: permission denied

# Solution: Fix npm permissions
npm config set prefix ~/.npm-global
export PATH=~/.npm-global/bin:$PATH

Issue: Command 'create-vite-pp' not found

# Solution: Install globally or use npx
npm install -g create-vite-pp
# OR
npx create-vite-pp

Issue: Slow installation

# Solution: Use faster npm registry
npm config set registry https://registry.npmjs.org/

📊 Performance

• Setup Time: ~30 seconds
• Package Size: ~24 dependencies
• Node.js Requirement: ≥14.0.0
• Cross-Platform: ✅ Windows, macOS, Linux

🔗 Related Projects

• Vite - Next generation frontend tooling
• React - A JavaScript library for building user interfaces
• Tailwind CSS - Rapidly build modern websites

📄 License

MIT License - see the LICENSE file for details.

👨‍💻 Author

Pritam Paul

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

🙏 Acknowledgments

• The Vite team for the amazing build tool
• The React team for the fantastic library
• The Tailwind CSS team for the utility-first framework
• All contributors and users of this package

⭐ Star this repo if you found it helpful!

Made with ❤️ by Pritam Paul