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

Answer 1

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

Answer 2

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