Tailwind CSS is not working in Vite + React

Question

I created a React application using Vite and used the documentation provided here to install Tailwind: Tailwind CSS Installation Guide.

However, it's not picking up any of the Tailwind styles.

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { router } from "./router";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

The only dependency I have installed is react-router-dom.

How can I fix this?

The question was written during v3. If you're using v4 or higher, please see the installation guide or check other v4-related questions: Problem installing TailwindCSS with Vite; How to upgrade TailwindCSS?; Cannot build frontend using Vite — rozsazoltan
– rozsazoltan, Commented Feb 2 at 9:53
How to install TailwindCSS v4 with Next.js and How to install TailwindCSS v4 with Vite & React app — rozsazoltan
– rozsazoltan, Commented May 6 at 7:29
This question is similar to: Cannot build frontend using Vite, TailwindCSS with PostCSS. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — rozsazoltan
– rozsazoltan, Commented Aug 24 at 14:23

Ram Chander · Accepted Answer · 2024-01-19 06:43:52Z

24

Here are the Changes I made in vite.config.js and it worked

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from 'tailwindcss'

export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  }
})

edited Jan 19, 2024 at 6:43

Ram Chander

1,68611 gold badges26 silver badges48 bronze badges

answered Jan 17, 2024 at 8:29

Vaishnavi Rama Shanmugam

2212 silver badges2 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dima Knivets Over a year ago

it is mentioned in the docs: one needs to run the npx tailwindcss init -p command which creates postcss config file, and then you don't need the css: {...} config in vite.config.js

qodeninja Over a year ago

@DimaKnivets I already had a postcss file with the proper settings, and this change finally worked for me vue3/vite, after NOTHING else did. Not even running the npx command

rozsazoltan · Accepted Answer · 2025-02-02 09:50:30Z

14

If you have installed postcss and autoprefixer (as outlined in step #2 here: https://v3.tailwindcss.com/docs/guides/vite), you should see both libraries in the "devDependencies" section of your package.json. If they are installed, you will need a postcss.config.cjs file in the root of your project which contains the following:

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
};

edited Feb 2 at 9:50

rozsazoltan

18.2k7 gold badges49 silver badges143 bronze badges

answered Feb 3, 2023 at 0:53

Ed Lucas

7,4544 gold badges40 silver badges52 bronze badges

2 Comments

Prajul Aaditya Over a year ago

Thank you, I had all three libraries installed in devDependecies, postcss.config.cjs was not there, it helped. But it's not mentioned in the documentation. And thanks for correcting the question grammatically.

RoseMary Over a year ago

Running command npx tailwindcss init -p will create postcss

miken32 · Accepted Answer · 2024-04-20 21:51:55Z

11

Double-check to see that you imported the index.css file. In my case, the silly mistake I made was that, while removing some boilerplate code, I inadvertently removed the 'import "./index.css"' line in my main.jsx.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
**import "./index.css";**

edited Apr 20, 2024 at 21:51

miken32

42.5k16 gold badges127 silver badges177 bronze badges

answered Mar 29, 2024 at 0:19

Solamoal

3593 silver badges6 bronze badges

Comments

rozsazoltan · Accepted Answer · 2025-02-02 09:50:47Z

9

After following the guides from the official documentation, you may want to check in your package.json file and see under the devDependencies if tailwind is appearing there or not. Also, check in your postcss.config.cjs file and see if the following is there:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Hope this helps.

edited Feb 2 at 9:50

rozsazoltan

18.2k7 gold badges49 silver badges143 bronze badges

answered Feb 3, 2023 at 1:08

htrgotoh

1137 bronze badges

1 Comment

Prajul Aaditya Over a year ago

Thank you, posts.config.cjs was not there, it helped.

rozsazoltan · Accepted Answer · 2025-02-02 09:50:55Z

3

To solve this issue, you need to run this command line below, to generate tailwind.config.js and postcss.config.js files inside the root of your project, rerun your app and should be fixed. visit: https://v3.tailwindcss.com/docs/guides/vite

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

edited Feb 2 at 9:50

rozsazoltan

18.2k7 gold badges49 silver badges143 bronze badges

answered Sep 18, 2023 at 0:41

Hudu

314 bronze badges

Comments

Imran Rafiq Rather · Accepted Answer · 2025-05-01 18:39:23Z

3

Update (TailwindCSS v4 with Vite)

I faced the issue setting up TailwindCSS v4 in my React Vite Project. Finally I fixed it and I noticed that the whole process has changed, Now we no longer need to setup postcss or install autoprefixer. You will be amazed to know how easy the process has become. Here are the steps:

First install tailwindcss and @tailwindcss/vite via npm.
```
 npm install tailwindcss @tailwindcss/vite
```
While creating react Vite Project, a configuration file by the name vite.config.js was created. We need to add the @tailwindcss/vite plugin to your Vite configuration. This will be your final setup of vite.config.js file

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite' // We have added this line

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()] // & We have added tailwindcss() here
})

Then import tailwind to your project in index.css file:
```
@import "tailwindcss";
```

Then run npm run dev & start using tailwind in your React Vite Project successfully.
You package.json should have the following tailwind packages:

Try writing some tailwind code in your React Components and see the magic for yourself & appreciate the updates.

Official Docs to keep an eye for future updates:

https://tailwindcss.com/docs/installation/using-vite

edited May 1 at 18:39

answered Feb 2 at 9:46

Imran Rafiq Rather

8,2881 gold badge23 silver badges41 bronze badges

1 Comment

Meet Rajpal Aug 4 at 18:11

This really helped me and none other worked because I was using latest tailwind css.

Garima · Accepted Answer · 2024-01-27 13:49:46Z

2

Your postcss.config.js file is missing. Run command npx tailwindcss init -p This will create postcss.config.js file with the following code

export default {
plugins: {
tailwindcss: {},
autoprefixer: {},},}

answered Jan 27, 2024 at 13:49

Garima

212 bronze badges

Comments

Hugo · Accepted Answer · 2024-06-24 16:29:33Z

1

In my case the problem came from tailwind.config.js, index.html was missing from the content.

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

answered Jun 24, 2024 at 16:29

Hugo

2,1853 gold badges29 silver badges40 bronze badges

Comments

Mykytak · Accepted Answer · 2024-07-05 10:05:15Z

0

In my case, I had css: { postcss: { ... } } in my vite config and separate postcss.config.js. Vite postcss config has a priority over postcss.config.js. And since I've tailwind config only in my postcss.config.js file, vite just ignored it completely.

answered Jul 5, 2024 at 10:05

Mykytak

3105 silver badges15 bronze badges

Comments

Hassan Elshazly Eida · Accepted Answer · 2024-07-22 00:10:59Z

0

in my case the problem was the you need to specify the correct purge

module.exports = {
      ---------> purge: ['./resources/**/*.blade.php', './resources/**/*.js', './resources/**/*.vue'],
      darkMode: false, // or 'media' or 'class'
      theme: {
        extend: {},
      },
      variants: {
        extend: {},
      },
      plugins: [],
    };

answered Jul 22, 2024 at 0:10

Hassan Elshazly Eida

87911 silver badges24 bronze badges

Comments

Saumye Navarathna · Accepted Answer · 2025-03-10 11:52:26Z

No need of using all of these imports or extra libraries.

@tailwind base;
@tailwind components;
@tailwind utilities;

Install Tailwind into your react application using following Command

npm install tailwindcss @tailwindcss/vite

Then remove your App.css file and it's reference from App.tsx

import './App.css' -- remove this in App.tsx

Also remove css classes in index.css like following

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

Then go into your vite.config.js and update the plugins like below with importing tailwind.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tailwindcss from "@tailwindcss/vite";
import path from "path";

// https://vite.dev/config/
export default defineConfig({
  plugins: [tailwindcss(), react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Now try add some tailwind css classes into your prefered file, this should work. I have done this for multiple times now, all the times these steps worked without an error.

Collectives™ on Stack Overflow

Tailwind CSS is not working in Vite + React

11 Answers 11

2 Comments

2 Comments

Comments

1 Comment

Comments

Update (TailwindCSS v4 with Vite)

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

2 Comments

2 Comments

Comments

1 Comment

Comments

Update (TailwindCSS v4 with Vite)

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related