Tailwind CSS Laravel Mix Error - Forces PostCSS 8 to be installed

Question

I recently created a new laravel 8 project using Breeze for the authentication and tailwind css. All worked perfectly when running npm run watch but once I run npm run prod I ran into errors. I noticed that the Tailwind docs mention that there are PostCSS issues so you need to unistall and run

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

I done that however every time I run npm run prod now the build quits at 98% and says

Additional dependencies must be installed. This will only take a moment.

Running: npm install postcss@^8.1 --save-dev --legacy-peer-deps
npm WARN [email protected] requires a peer of webpack@^1 || ^2 || ^3 || ^4 but none is installed. You must install peer dependencies yourself.

Finished. Please run Mix again.

This auto updates PostCSS to 8.1 every time. After that if I run npm run prod again it does the exact same message over and over.

I've tried removing the browsersync plugins and trying again but it still doesn't work.

Anyone ran into this or got a solution?

Deandre

Answer 1

As Digvijay mentioned above the new Mix v6 now supports PostCSS 8. So run:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

After the when you run npm run prod you will still get this message:

Additional dependencies must be installed. This will only take a moment.

Running: npm install browser-sync [email protected] --save-dev --legacy-peer-deps

npm WARN [email protected] requires a peer of webpack@^1 || ^2 || ^3 || ^4 but none is installed. You must install peer dependencies yourself.

Finished. Please run Mix again.

To fix this just add sudo to the front of the npm command it ran:

sudo npm install browser-sync [email protected] --save-dev --legacy-peer-deps

Now run npm run prod and it should work!

Deandre

Answer 2

laravel-mix v6 now supports PostCSS8

According to tailwind docs, it suggests to use npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

With the new Mix v6, run npm install tailwindcss@latest postcss@latest autoprefixer@latest

After this, npm run prod will run the way it should.

Omophagia

Thanks for your help. I never realised Post CSS worked with the new Mix version, cheers. I realised it kept installed browser-sync because I still had the brower sync code in my webpack file, I removed this and npm run prod now works but once I readded it I'm still getting the ""npm WARN [email protected] requires a peer of webpack@^1 || ^2 || ^3 || ^4 but none is installed. You must install peer dependencies yourself."" error. So it's obviosuly a browser sync issue now. – Deandre

Answer 3

you must upgrade laravel mix using the following command

npm install laravel-mix@latest

Vouvray

Fixed this pb in my case (Laravel 8) – Saval