Create a React + TypeScript + Tailwind project with Vite

To quickly bootstrap a new React project with TypeScript using Vite, you can use the following npm command:

shell
npm create vite@latest react-app -- --template react-ts

Or if you prefer yarn:

shell
yarn create vite react-app --template react-ts

Once the project is created, navigate into the directory:

shell
cd react-app

Then install the dependencies:

shell
npm install

Finally, start up the dev server:

shell
npm run dev

To install Tailwind CSS and its peer dependencies, run:

shell
npm install tailwindcss @tailwindcss/vite --save-dev

Next, open vite.config.ts and add:

vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

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

Open the index.css file in your project's src directory and replace its content with the following:

index.css
@import "tailwindcss";

To import Tailwind in the project, open the main.tsx file and add the following line at the top of the file (if it's not already there)

html
import './index.css';