How to setup Tailwind CSS v4.1.5 with Vite + React (2025 updated guide)

Tailwind CSS v4+ has a new setup method when using Vite and React. This post walks you through the latest official installation process as outlined on the Tailwind CSS docs.

1. Prerequisites

Make sure you have Node.js (v18+) and npm installed:

node -v
npm -v

2. Create a new Vite + React project

npm create vite@latest my-portfolio -- --template react
cd my-portfolio
npm install

3. Install Tailwind CSS

Install tailwindcss and @tailwindcss/vite via npm.

npm install tailwindcss @tailwindcss/vite

4. Configure the Vite plugin

Add the @tailwindcss/vite plugin to your Vite configuration file(vite.config.js).

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    react(), tailwindcss(),
  ],
})

5. Import Tailwind CSS

Add an @import to your CSS file (index.css) that imports Tailwind CSS.

@import "tailwindcss";

6. Test

In your app.jsx file replace the code with

<div className="min-h-screen flex items-center justify-center bg-black text-white text-4xl font-bold">
      Tailwind is working!
</div>

7. Start your build process

Run your build process with npm run dev or whatever command is configured in your package.json file.

npm run dev

Was this helpful? Let me know in the comments and follow for more!