create-vite-app-with-tailwind v1.1.0

🚀 create-vite-app-with-tailwind

A powerful CLI tool to instantly set up a Vite + React project with Tailwind CSS, Axios, and React Router DOM—eliminating the hassle of manual configuration! Perfect for modern frontend developers who want to hit the ground running.

🚠 Note: This tool only supports React JavaScript and React TypeScript templates. It does NOT work with JavaScript SWC or TypeScript SWC.

✨ Features

✔️ Instantly creates a Vite + React app (JavaScript or TypeScript).
✔️ Sets up Tailwind CSS, with its v4.
✔️ Pre-configures axios for HTTP requests.
✔️ Includes react-router-dom for easy routing.
✔️ Updates App.jsx or App.tsx with Tailwind styling.
✔️ Automatically configures index.css with Tailwind directives.

🛆 Installation

Install the package globally in you system (only once)

npm install create-vite-app-with-tailwind -g

🚀 How It Works

1. Creates a Vite + React app: Uses npx create-vite@latest to generate a new React project.
2. Installs Tailwind CSS.
3. Configures Tailwind: Updates index.css and links Tailwind with index.html.
4. Modifies App.jsx / App.tsx: Adds a Tailwind-styled example component.
5. Installs additional dependencies: Installs axios and react-router-dom.

📌 Usage

Run the following command to create a new Vite + React project:

npx create-vite-app-with-tailwind <app-name>

Example:

$ npx create-vite-app-with-tailwind my-vite-app

After the setup completes, your project is ready with:

• Vite + React (JS/TS) ✅
• Tailwind CSS ✅
• Axios & React Router DOM ✅

🚀 Getting Started

1. Navigate to your project directory:

   cd <app-name>

2. Install dependencies (if not already installed):

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and go to http://localhost:5173 to see your app in action! 🎉

⚠️ Requirements

• Node.js (>= 14.x.x)
• npm (>= 6.x.x)

🛠 Troubleshooting

❌ The script doesn’t run when using npx create-vite-app-with-tailwind

✅ Solution: Ensure your environment is configured correctly. If issues persist, try running:

npx clear-npx-cache
npx create-vite-app-with-tailwind <app-name>

💪 Updating the Package

To upgrade to the latest version of create-vite-app-with-tailwind, run:

npm update -g create-vite-app-with-tailwind

Or, if using npx, clear the cache first:

npx clear-npx-cache
npx create-vite-app-with-tailwind <app-name>

🤝 Contributing

Have ideas or improvements? Feel free to fork, submit issues, or open pull requests—contributions are always welcome!

🔥 create-vite-app-with-tailwind — Your ultimate shortcut to building modern React projects with Tailwind CSS! 🚀