CODEWITHSUNDEEP
laravelwebpacklaravel-mixtailwind-css
user3479267
user3479267

Reputation: 232

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

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?

Upvotes: 0

Views: 5162

Answers (3)

Jose Luis Otero
Jose Luis Otero

Reputation: 29

you must upgrade laravel mix using the following command

npm install laravel-mix@latest

Upvotes: 2

user3479267
user3479267

Reputation: 232

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!

Upvotes: 1

Digvijay
Digvijay

Reputation: 8927

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.

Upvotes: 3

Related Questions