In this demo I’m going to assume you have created an app using Vite, like I showed you in setting up a React project with Vite.

Now I want to show you how to install Tailwind CSS (v4).

1) Install Tailwind and the Vite plugin

npm install tailwindcss @tailwindcss/vite

2) Add the plugin to vite.config.ts

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

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

3) Import Tailwind in your CSS

Add this line at the top of src/index.css:

@import "tailwindcss";

Tailwind v4 auto-detects your content, so a tailwind.config.* file is optional unless you want to customize the theme or add plugins.

Restart the app with npm run dev and Tailwind should be enabled.

Now for example try changing your App.tsx / App.jsx to this:

import './App.css'

function App() {
  return (
    <>
      <p className='text-blue-600 font-bold text-6xl text-center'>TEST</p>
    </>
  )
}

export default App

That’s it, we installed Tailwind CSS successfully.

Lessons in this unit:

0:	Introduction
1:	▶︎ Installing Tailwind CSS in a React app
2:	CSS in React
3:	Using SASS in React
4:	Styled Components