This template provides a stater setup to get React working in Vite with TailwindCSS installed.

---

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

2. Install and Run*

Run the following commands in your terminal:

npm install
npm run dev

• npm install to install the node_modules on your local repo which has been .gitignore in this github repo.
• npm 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 -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Replace tailwind.config.js inner codes with

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        dark: "#111111",
      },
      fontSize: {
        inherit: "inherit",
      },
      screens: {
        sm: "640px",
        md: "768px",
        lg: "1024px",
        xl: "1280px",
        "2xl": "1600px",
        "3xl": "1920px",
      },
      container: {
        center: true,
        padding: "1rem",
        screens: {
          sm: "100%",
          md: "100%",
          lg: "1024px",
          xl: "1280px",
          "2xl": "1600px",
        },
      },
    },
  },
  plugins: [],
};

Paste these lines in index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

React is not defined error

If you encounter the error React is not defined or React is defined but never used, add the following line to the top of your tsconfig.json file:

{
    "files": [],
    "references": [
        {
            "path": "./tsconfig.app.json"
        },
        {
            "path": "./tsconfig.node.json"
        }
    ],
    "compilerOptions": {
        "jsx": "react-jsx",
        "jsxImportSource": "react"
    }
}

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!