Set up React, TypeScript and Tailwind in Vite

Create a Vite project

Open your terminal of choice and go to the repo where you want to create your project.

Once there, use the following command to create the project:

npm create vite@latest

You will be prompted the following:

• Project name: vite-project
• Select a framework: React
• Select a variant: TypeScript

Now go to this newly created repo and install dependencies:

cd vite-project && npm i

Install Tailwind CSS

Install tailwindcss and @tailwindcss/vite via npm.

npm install tailwindcss @tailwindcss/vite

Start the development server

Open the project in your editor and run the development server

code . && npm run dev

Your project should be up and running at localhost:5173 ↗

Configure the Vite plugin

Add the tailwindcss plugin to your Vite configuration.

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()],
})
 

Import Tailwind CSS

Add an @import to your base CSS file that imports Tailwind CSS.

@import 'tailwindcss';

Start using Tailwind

Open your App.tsx file and start using tailwind classes

function App() {
  return <h1 className="text-red-500 bg-gray-800">My Vite Project</h1>;
}
 
export default App;

Happy coding! 🫡