Install & Setup Vite + React + Typescript + Tailwind CSS 3

In this section we will see how to install & setup vite + react + typescript with tailwind css 3. Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.


Create Vite Project For React

Install vite via npm:

npm create [email protected]

Install vite via yarn:

yarn create vite

Select react.

yarn create v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "[email protected]" with binaries:
   - create-vite
   - cva
✔ Project name: … react-project
? Select a framework: › - Use arrow-keys. Return to submit.
  vanilla
  vue
❯  react
  preact
  lit
  svelte

Select react js with typescript.

Select a framework: › react
? Select a variant: › - Use arrow-keys. Return to submit.
  react
❯  react-ts

Move to project directory and install dependencies.

cd react-project
npm install 
npm run dev 


Install Tailwind CSS 3 Vite React Project.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;
vite react

vite react

App.tsx

function App() {

  return (
    <div className="min-h-screen flex justify-center items-center">
      <h1 className="text-3xl font-bold text-blue-600">
      Install & Setup Vite + React + Typescript + Tailwind CSS 3
      </h1>
    </div>
  );
}

export default App;
Install & Setup Vite + React + Typescript + Tailwind CSS 3

Install & Setup Vite + React + Typescript + Tailwind CSS 3

Run project

npm run dev