HOW TO ADD TAILWINDCSS TO A REACT APP BUILT WITH VITE (2025 Guide)

I recently decided to create some React features as a way to relax and unwind, and in the process, I tried to add Tailwind CSS to a React app built with Vite. What I thought would be a straightforward setup turned out to be more challenging than expected. Following the official Tailwind CSS documentation didn’t help me successfully set up Tailwind in my Vite + React project — and I ran into errors that made me question what I was missing. After spending a couple of days troubleshooting and testing, I finally figured out a way that works. So I decided to document how to install Tailwind CSS with React and Vite — both for my future self and for anyone else who might be stuck trying to do the same.

STEP 0. Create a React app with Vite

Make sure you have Node.js installed. Then create your Vite project with:

npm create vite@latest

This will prompt you to name your app and choose a framework (select React) and language (JavaScript or TypeScript).

Next, install dependencies and start your dev server:

npm install && npm run dev

You should now see your app running at http://localhost:5173/

STEP 1. Install TailwindCSS, PostCSS, and Autoprefixer as a dev dependency in your app

1. Run the following command to install Tailwind and its required dependencies:

npm install -D tailwindcss postcss autoprefixer

This installs the latest version of tailwindcss, postcss and autoprefixer dependencies.
Tailwind is the utility-first CSS framework itself,

postcss is the tool that processes your CSS and adds features like nesting, custom plugins, etc. Tailwind uses it to transform your CSS, and the autoprefixer ensures CSS compatibility across different browsers.

2. Then run:

   npx tailwindcss init -p

This command initializes the TailwindCSS framework and creates the config files needed to wire Tailwind into your build process- tailwind.config.js, postcss.config.js.

Troubleshooting: Tailwind CSS Binary Missing in node_modules\.bin

I found that this is the troublesome step in the installation, because at the time of writing, the Tailwind CSS framework would not install successfully even if the process completed successfully.

To see what I am saying, run:

dir node_modules\.bin

You should see:
tailwindcss

tailwindcss.cmd

tailwindcss.ps1

as part of the printout in your terminal, if not, it means the installation failed silently

If you go ahead to run

npx tailwindcss init -p

You would get an error that indicates that no executable to install TailwindCSS

The Fix: Use an Older Tailwind CSS Version (v3.4.1)

The latest version of Tailwind might not install correctly in some environments, so I used version 3.4.1

npm install -D tailwindcss@3.4.1 postcss autoprefixer

Now run:

dir node_modules\.bin

Now look!!!,

We have Tailwind installed successfully!

We can now go ahead and do the rest of the setup steps.

Rerun:

npx tailwindcss init -p

This command would create a tailwind.config.js and postcss.config.js files in your project

STEP 2. Configure tailwind.config.js for React and Vite

In your generated tailwind.config.js, add the paths where Tailwind should look for class usage:

/** @type {import('tailwindcss').Config} */

export default {

content: [

"./index.html",

"./src/**/*.{js,ts,jsx,tsx}",

],

theme: {

extend: {},

},

STEP 3. Add Tailwind Directives to Your CSS File

Now that we have Tailwind added to the project, we can make it accessible in the entire project by editing or creating index.css insrc/ folder and add the following:

@tailwind base;

@tailwind components;

@tailwind utilities;

@tailwind base: Adds base styles (resets, typography normalization)

@tailwind components: For any pre-built UI components, Tailwind might offer

@tailwind utilities: Gives you access to all the utility classes like bg-red-500, flex, etc.

STEP 4. Import the CSS into Your React App React Entry File

If you do not have the index.css already imported into the entry point of your app, then import it. For me, the entry point of my app is main.tsx so I would add the index.css at the top of my main.tsx, yours could be main.jsx

STEP 5: Test Tailwind CSS Setup in Your Vite React App

So to check if my installation is complete and working, I would go into the App.tsx and replace the App function with

function App() {

return (

<div className="min-h-screen bg-gray-100 flex items-center justify-center">

<h1 className="text-4xl font-bold text-blue-600">Hello Tailwind + Vite + React!</h1>

</div>

);

}

export default App;

Now run
npm run dev
And…

Viola!! We have successfully added TailwindCSS to our Vite React app and this is what we have

Final Thoughts: Tailwind CSS Working in Vite React App

It’s always a little frustrating when "official" instructions don’t work out of the box, but that’s part of the dev journey — figuring things out, learning, and sharing.

You’re welcome. Don’t mention it. 😄

Was this helpful?

Let me know in the comments or reach out if you run into any issues — happy to help!