Vite + React + Tailwind CSS Starter Template using NPM package

A modern, pre-configured starter template that combines Vite, React, and Tailwind CSS with a well-organized project structure. This template includes routing setup, layout components, and essential directory organization to help you start building React applications faster.

Create Vite Tailwind Unique

A CLI tool to create a Vite + Tailwind CSS React project with a single command.

Download the Package

To use the CLI tool, first download the package by running:

npm install create-vite-tailwind-unique

After installing the package, you can create a new project by running:

npx create-vite-tailwind-unique <yourProjectName>

Once the project is created successfully, navigate into your project directory:

cd <yourProjectName>

Then, start the development server with:

npm run dev

If necessary you can delete the existing project or modify the existing.

Features

⚡️ Vite - Lightning fast build tool
⚛️ React - JavaScript library for building user interfaces
🎨 Tailwind CSS - Utility-first CSS framework
🚦 React Router - Declarative routing for React
📦 Hero Icons - Beautiful hand-crafted SVG icons
🛠️ Pre-configured with best practices
📁 Organized directory structure
🎯 Basic routing setup with layouts

Project Structure


src/
├── assets/ # Static assets like images, fonts, etc.
├── components/ # Reusable UI components
│ └── ui/ # Basic UI components
├── constants/ # Application constants
├── contexts/ # React context providers
├── hooks/ # Custom React hooks
├── layouts/ # Layout components
├── pages/ # Page components
├── services/ # API services and external integrations
└── utils/ # Utility functions and helpers

Getting Started

Using the Setup Script

Run the setup script with your project name:
```
./setup.sh my-project-name
```

Manual Installation

Clone or download this template
Install dependencies:

npm install

Start the development server:

npm run dev

Open your browser and visit http://localhost:5173

Available Scripts

npm run dev - Start development server
npm run build - Build for production
npm run preview - Preview production build locally

Customization

Tailwind Configuration

The template includes a basic Tailwind CSS configuration with a primary color palette. You can modify the tailwind.config.js file to customize:

Colors
Typography
Spacing
Breakpoints
And more...

Adding New Routes

Create a new page component in src/pages/
Add the route in src/App.jsx:

<Routes>
  <Route path="/" element={<MainLayout />}>
    <Route index element={<Home />} />
    <Route path="/new-page" element={<NewPage />} />
  </Route>
</Routes>

prithwish249 / create-vite-tailwind

readme