TailwindCSS not working with Vite + React

Question

I am initializing TailwindCSS using Create React App (CRA); so my project built with Vite, React, but can't get it to work.

It seems like postcss and autoprefixer is not getting installed, when I try to install manually it gives the following error:

warning Pattern ["postcss@^8.4.20"] is trying to unpack in the same destination "C:\\Users\\NUR\\AppData\\Local\\Yarn\\Cache\\v6\\npm-postcss-8.4.20-64c52f509644cecad8567e949f4081d98349dc56-integrity\\node_modules\\postcss" as pattern ["postcss@^8.4.18","postcss@^8.4.20"]. This could result in non-deterministic behavior, skipping.
[3/4] Linking dependencies...
warning " > [email protected]" has unmet peer dependency "postcss@^8.0.9".

Perhaps try use https://tailwindcss.com/docs/guides/vite as a reference instead of the guide for CRA. — John Li
– John Li, Commented Jan 2, 2023 at 21:16
@JohnLi I have tried using the vite guide , it still doesn't work and gives the same issue — HOSENUR
– HOSENUR, Commented Jan 2, 2023 at 21:18
I just tried and only one thing went wrong, there was no postcss.config.cjs Did you have it when you tried npx tailwindcss init -p ? — OneQ
– OneQ, Commented Jan 2, 2023 at 21:45

Suman Khatri · Accepted Answer · 2023-11-27 13:18:24Z

57

I followed the documentation to install tailwind with Vite and React and it didn't worked too. then i add these changes in vite.config.js and it worked.

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

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  },
});

answered Nov 27, 2023 at 13:18

Suman Khatri

5713 silver badges3 bronze badges

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

1 Comment

Farooq Alaulddin Over a year ago

and if you want to keep your postcss.config.js, you can move tailwindcss() from the vite config file to your separate postcss config file - for me, I had to place it before the other plugins that I am using.

OneQ · Accepted Answer · 2023-01-02 21:53:09Z

30

I followed the doc to install tailwind with Vite and React and it didn't work too.

Don't install packages manually, use the npx tailwindcss init -p but create manually the file postcss.config.cjs with :

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

Don't forget the rest of the guide and it will work

answered Jan 2, 2023 at 21:53

OneQ

1,5071 gold badge13 silver badges17 bronze badges

1 Comment

Adriaan Over a year ago

In a comment, wrongly posted as an answer here, mentions "in changing the default export to a module export, at least in my case, breaks the entire app."

Danish Tyagi · Accepted Answer · 2025-02-21 18:14:13Z

10

tailwindcss 3 react+vite issue

solved after the tailwind installation command

first

run : npm install -D tailwindcss@3 postcss autoprefixer

second

after that run the command : npx tailwindcss init -p that will create both tailwind.config.js and postcss.config.js

after that clear your index.css and add these

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

after that update the tailwind.config.js file to this

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

edited Feb 21 at 18:14

answered Aug 26, 2024 at 9:33

Danish Tyagi

911 silver badge3 bronze badges

Comments

Vladimir Kroz · Accepted Answer · 2024-11-20 01:47:01Z

7

This code working for me.

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

// https://vitejs.dev/config/ 
export default defineConfig({   
    plugins: [react()],   
    css: {
        postcss: {
            plugins: [tailwindcss()],
        },   
    }, 
});

edited Nov 20, 2024 at 1:47

Vladimir Kroz

5,3876 gold badges43 silver badges50 bronze badges

answered Oct 7, 2024 at 8:06

HUDA BODRUL

791 silver badge1 bronze badge

2 Comments

Boshra Jaber Over a year ago

Please explain how this addresses the issue. What have you changed? Code-only answers are not good answers

Rajath Nov 27, 2024 at 17:52

This vite.config.js file does the following: It integrates React support via @vitejs/plugin-react. It configures PostCSS to use Tailwind CSS for processing styles, ensuring the proper Tailwind classes are applied. It optimizes your development environment for React with fast refresh and efficient style processing.

syedNabeel · Accepted Answer · 2024-09-10 01:30:17Z

3

Add this in tailwind.config.js

content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],

answered Sep 10, 2024 at 1:30

syedNabeel

311 bronze badge

Comments

Chinenye · Accepted Answer · 2024-05-24 20:58:34Z

2

I don't know if this helps anyone, but I had the same issue after following the guide, and all I had to do was add this line to my vite.config.js file.

import tailwindcss from "tailwindcss";

answered May 24, 2024 at 20:58

Chinenye

497 bronze badges

Comments

Muhammad Adil · Accepted Answer · 2024-09-10 09:30:50Z

First confirm that TailwindCSS is set up correctly... you can use following commands to done this .

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

After installing TailwindCSS create a new file postcss.config.js inside your project folder and copy and paste them.

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

The Next Step is to create one more file inside your project folder called tailwind.config.js and copy and paste them.

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

In the Final step, Locate the files inside your project folder called main.css or index.css copy and paste them.

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

I hope this will help.

DaemonDark · Accepted Answer · 2024-10-28 21:41:48Z

1

It worked for me after adding <script src="https://cdn.tailwindcss.com"></script> in my index.html

answered Oct 28, 2024 at 21:41

DaemonDark

112 bronze badges

Comments

hans · Accepted Answer · 2023-09-09 15:53:32Z

0

I followed the doc to install tailwind with Vite and React and it didn't work too and I was also creating my postCSS config file manually too which was wrong.

All I needed to do was use the npx tailwindcss init -p and it created both my tailwind config file and postcss config file for me automatically and solved my problem

edited Sep 9, 2023 at 15:53

answered Sep 9, 2023 at 15:52

hans

13 bronze badges

Comments

Adarsh Ramgirwar · Accepted Answer · 2024-01-07 03:17:29Z

0

when you install react with vite@latest your autoprefixer node module is not install with node packages. so you need to generate first postcss.config.js using npm install -D autoprefixer and requred node module to run command npm install -D autoprefixer

in short :-

need to install required postcss.config file : npm install -D autoprefixer
install required node module : cmd npm install -D autoprefixer

answered Jan 7, 2024 at 3:17

Adarsh Ramgirwar

11

1 Comment

shellscape Over a year ago

respectfully, the language used in your answer is impossible to decipher.

Dhruv Jain · Accepted Answer · 2024-10-04 05:20:50Z

0

Make sure that ./src/index.css file must contains:

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

It solved the issue for me. Hope it helps.

answered Oct 4, 2024 at 5:20

Dhruv Jain

13 bronze badges

Comments

Cavidan Bagiri · Accepted Answer · 2024-11-02 19:51:47Z

0

1 - Follow this documentation -> https://tailwindcss.com/docs/guides/create-react-app

2 - add this -> npm i postcss 3 - add this -> npm i autoprefixer 4 - create manually this file in your project -> postcss.config.js 5 - add below code inside of postcss.config.js

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

answered Nov 2, 2024 at 19:51

Cavidan Bagiri

514 bronze badges

Comments

Beginner Developer · Accepted Answer · 2024-07-04 00:00:13Z

-3

Remember to rerun your project after installing any package. After installing and configuring files tailwind did not work. When I stop and rerun my project it started working

answered Jul 4, 2024 at 0:00

Beginner Developer

1

Collectives™ on Stack Overflow

TailwindCSS not working with Vite + React

13 Answers 13

1 Comment

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

1 Comment

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Linked

Related