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 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

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

index.css

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

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

Run project

npm run dev 

Read Also

React Tailwind CSS Accordion (FAQ) Example

React Tailwind CSS Tabs Examples

How to use Tailwind CSS 3 with Headless UI In React

Toggle Switch in React JS with Tailwind CSS Example

Create Reusable Button Component with React & Tailwind CSS

React Tailwind CSS Search Bar Example

React Tailwind CSS Sidebar Example

React JS Login Form with Tailwind CSS Example

React Responsive Navbar Menu With Tailwind CSS Example

How to install Tailwind CSS in React

React Tailwind CSS Dialog (Modal) Example

React Tailwind Registration Form Example

React Tailwind CSS Table Example

React Tailwind CSS Responsive Gallery Example