DEV Community

Cover image for How to setup Tailwind CSS v4.1.5 with Vite + React (2025 updated guide)
Imamul Islam Ifti
Imamul Islam Ifti

Posted on

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

#webdev #react #tailwindcss #vite

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
Enter fullscreen mode Exit fullscreen mode

2. Create a new Vite + React project 

npm create vite@latest my-portfolio -- --template react
cd my-portfolio
npm install
Enter fullscreen mode Exit fullscreen mode

3. Install Tailwind CSS

Install tailwindcss and @tailwindcss/vite via npm.

npm install tailwindcss @tailwindcss/vite
Enter fullscreen mode Exit fullscreen mode

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(),
  ],
})
Enter fullscreen mode Exit fullscreen mode

5. Import Tailwind CSS

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

@import "tailwindcss";
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)