How to setup tailwind in vite react app (2025)

You might be facing issue in setting up tailwind in your vite react app. Well, that is because the latest updates in both, tailwind and vite have changed the way how tailwind is set up in a react app.

Here’s how you have to install tailwind in your react app:

1. Install react using Vite react (on windows)

    $ npm create vite@latest my-project
   

Then follow the prompts!

2. Install dependencies

    $ cd my-project
    $ npm install
   

3. Install tailwindcss

    npm install tailwindcss @tailwindcss/vite
   

4. Configure the Vite Plugin

   This is one of the most important steps.
   In your my-project directory,
   Go to vite.config.ts or vite.config.js

5. Paste this code into that file

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

5. Import Tailwind CSS into the index.css

6. Go to the src folder inside my-project directory, then open index.css file and paste the following line at the very top of it.

    @import "tailwindcss";
   

7. Run the project

   You’re good to go now. Run your project and your tailwindcss should perfectly be installed.

    $ npm run dev
   

   If it doesn’t let me know in the comments or message me on linkedin, I’d definitely help you out.

   Cheers!