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 Tailwind is working! 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!

May 7, 2025 - 16:07

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