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

In this section, we will explore how to install and set up Vite along with React and TypeScript, integrating Tailwind CSS 3. Vite is a build tool designed to offer a quicker and more streamlined development experience for modern web projects.

Create Vite Project For React

Install vite via npm:

npm create vite@latest

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

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

add tailwind css @tailwind directives

@tailwind base;
@tailwind components;
@tailwind utilities;
vite react tailwind folder structure
App.jsx
export default 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>
    );
}
Vite + React + Typescript + Tailwind CSS 3

Run project.

npm run dev

6 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *