I have a project written using styled components, but I want to switch to Tailwind CSS. I'm getting the following error when I try to run the installation command: npm install -D tailwindcss postcss autoprefixer.
$ npm install -D tailwindcss postcss autoprefixer
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: form@0.1.0
npm ERR! Found: autoprefixer@9.8.6
npm ERR! node_modules/autoprefixer
npm ERR! autoprefixer@"^9.6.1" from postcss-preset-env@6.7.0
npm ERR! node_modules/postcss-preset-env
npm ERR! postcss-preset-env@"6.7.0" from react-scripts@4.0.3
npm ERR! node_modules/react-scripts
npm ERR! react-scripts@"4.0.3" from the root project
npm ERR! dev autoprefixer@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev autoprefixer@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: postcss@8.4.14
npm ERR! node_modules/postcss
npm ERR! peer postcss@"^8.1.0" from autoprefixer@10.4.7
npm ERR! node_modules/autoprefixer
npm ERR! dev autoprefixer@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.npm ERR!
npm ERR! See C:\Users\DELL\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\DELL\AppData\Local\npm-cache\_logs\2022-07-20T12_29_09_610Z-debug-0.log
To be honest, I don't understand what's going on. Please, I need help.
I had the same problem while configuring it with react app but it is solved when I use yarn instead of npm yarn add tailwindcss postcss-cli autoprefixer -D