Vite Breeze (Automating React Project Structure Development With TailwindCSS)

[MyrinNew]

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 muhbasit235@gmail.com for details.
• License Purchase If you need a license visit this link: https://basitwave1.gumroad.com/l/bkhhk

👨💻 Author

Basit Jawad



More...