javascriptreactjstailwind-cssvite

TailwindCSS not working with Vite + React


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 " > tailwindcss@3.2.4" has unmet peer dependency "postcss@^8.0.9".

Solution

  • 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