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?

Yugoslavia

Answer 1

If you have installed postcss and autoprefixer (as outlined in step #2 here: https://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")],
};

Sepia

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. – Yugoslavia

Answer 2

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

Keratoid

Bless you for coming back and posting the solution. I was missing tailwind() in my plugins. <3 – Rumery

Holy god, why isn't this mentioned in the tailwind documentation? – Andizhan

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 – Kyte

@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 – Tyr

Answer 3

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.

Motoring

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

Answer 4

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";**

Breathless

Answer 5

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://tailwindcss.com/docs/guides/vite

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

Forrer

Answer 6

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: {},},}

Padauk

Answer 7

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: [],
}

Linkage

Answer 8

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.

Draco

Answer 9

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: [],
    };

Banks