Vite Breeze (Automating React Project Structure Development With TailwindCSS)

Vite Breeze

A simple CLI tool to quickly generate a React project using Vite, React Router, and a pre-configured context folder. It also sets up Tailwind CSS, along with auto-created pages and components folders.

Note

Do not use ( npm i vite-breeze ) as it will not work because its a Cli-tool not a package.

🚀 Installation

Instead of installing globally, you can use npx to run the CLI directly:

npx vite-breeze

Why npx?

Using npx vite-breeze is recommended because:

✅ No Global Installation: Avoids version conflicts.
✅ Always Up-to-Date: Ensures you're using the latest version.
✅ Quick & Easy: Runs instantly without installation.

🔧 Usage

Once you run the command, you'll be prompted to enter a project name:

📛 Enter project name: my-react-app

vite-breeze will then:

1. Create a new directory with the specified name.
2. Initialize a new Vite React project.
3. Install dependencies including React Router, Axios, and Tailwind CSS.
4. Configure Tailwind CSS automatically.
5. Create the following folder structure in src/:
   • context/ - For React Context API files (AppContext.js included).
   • components/ - For reusable components.
   • pages/ - For page components.

✅ After setup, follow these steps:

cd my-react-app
npm run dev

📌 Features

• ⚡ Vite-Powered: Super-fast project setup.
• 🎨 Tailwind CSS: Pre-configured for styling.
• 🌍 React Router: Automatically installed.
• 🛡️ Axios: Automatically installed.
• 🏗 Organized Structure: Creates a clean project layout.
• 🔧 Context API Setup: Adds a ready-to-use AppContext.js.

🤝 Contributing

Contributions are welcome! Open an issue or submit a pull request on GitHub.

📜 License

• Commercial License (for companies, SaaS, and proprietary products). Contact [e-mail] for details.
• License Purchase If you need a license visit this link: https://basitwave1.gumroad.com/l/bkhhk

👨‍💻 Author

Basit Jawad