TailwindCSS not working with Vite + React

Question

I am initializing TailWindCSS using https://tailwindcss.com/docs/guides/create-react-app on a Vite + React + JavaScript project but cant 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".

Caloric

Perhaps try use https://tailwindcss.com/docs/guides/vite as a reference instead of the guide for CRA. – Jannajannel

@JohnLi I have tried using the vite guide , it still doesn't work and gives the same issue – Caloric

Can you show you package.json and tailwind.config.cjs ? – Columbary

I have copied the TailWind config exactly from the guide – Caloric

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 ? – Columbary

No , same for me , postcss isn't getting installed, and the config is also not generated on npx init – Caloric

Answer 1

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

Columbary

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." – Ultrastructure

Answer 2

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

Prosody

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

Answer 3

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

Doggy

Answer 4

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

Moment

Answer 5

tailwindcss react+vite issue

solved after the tailwind installation command

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

and after that you need run the command : npm install -D autoprefixer

that will fixed the tailwindcss issue in react+vite

Flaviaflavian

Answer 6

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 :-

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

Variation

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

Answer 7

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

Continuation

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Ickes