Vite + React + TailwindCSS(4) Starter Kit

---

Getting Started*

1. Clone this repo*

git clone https://github.com/purnasth/vite-react-tailwind-starter.git

→ for jsx

git checkout vrt

Repo Url: https://github.com/purnasth/vite-react-tailwind-starter-kit/tree/vrt

→ for TypeScript

git checkout vrt-ts

Repo Url: https://github.com/purnasth/vite-react-tailwind-starter-kit/tree/vrt-ts

→ for react-with-tailwind(v3)

git checkout tailwind-v3

Repo Url: https://github.com/purnasth/vite-react-tailwind-starter-kit/tree/tailwind-v3

---

2. Install and Run*

Run the following commands in your terminal:

pnpm install
pnpm run dev

• pnpm install to install the node_modules on your local repo which has been .gitignore in this github repo.
• pnpm run dev for running this in your browser, by default it opens in port http://localhost:5173/

---

Getting Started*

1. Clone this repo*

git clone https://github.com/purnasth/vite-react-tailwind-starter.git

→ for pnpm TypeScript + Tailwindcss + Prettier (Auto Formatting)

the `main` branch

→ Repo Url: https://github.com/purnasth/vite-react-tailwind-starter-kit/

2. Install and Run*

Run the following commands in your terminal:

pnpm install
pnpm dev

• pnpm install to install the node_modules on your local repo which has been .gitignore in this github repo.
• pnpm dev for running this in your browser, by default it opens in port http://localhost:5173/

---

Codes Used

NOTE: Please disregard these below provided codes if you've already completed the first two steps of the "Getting Started" section. It's only meant for those interested in manually creating a project from scratch with Vite + React, Typescript, TailwindCSS and Prettier (Auto Formatting) with pnpm.

Install vite + react

pnpm create vite@latest ./ --template react
# y to proceed
# Select a framework: react
# Select a variant: TypeScript + SWC
pnpm install
pnpm run dev

npm run dev -- --host

Install tailwindCSS

pnpm install tailwindcss @tailwindcss/vite

Configure the Vite plugin vite.config.ts

Update the file vite.config.ts file:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import tailwindcss from '@tailwindcss/vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Import Tailwind CSS styles index.css

Create a file named index.css in the src directory and add the following lines:

@import "tailwindcss";

NOTE: In case you are migrating from tailwindcss v3.4 to v4.0, link your existing tailwind.config.js file to the new index.css file.

@config "../tailwind.config.js";

Install Prettier

pnpm install -D prettier

Add Prettier Config

Create a file named .prettierrc in the root directory and add the following lines:

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 80,
  "endOfLine": "auto"
}

Add Prettier Scripts

Add the following lines to the scripts object in your package.json file:

"format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
"format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""

Run Prettier

pnpm run format

Auto Formatting with Prettier

pnpm i -D prettier prettier-plugin-tailwindcss

NOTE: Enable the formatOnSave option in your editor to auto-format your code with Prettier. You can also run the pnpm run format command to format your code. Cheers! Now on every save, your code will be auto-formatted. Congratulations!

---

Libraries pnpm

pnpm install react-router-dom
pnpm install react-icons

⭐ Star this repo on GitHub — it helps!