Trying to deploy Laravel app with tailwindcss on frontend. But, when i execute npm run dev i get an error

Question

When npm run dev is being executed in cmd, i get an error saying that i need postcss v8 and i already have postcss v8.3. Is it possible that tailwind requires exact version that is 8 even tho newer versions are beign released. Everything is setted up "right", like its said in their doccumentation. This is the error i get, any suggestions are welcome. Best regards.

[email protected] dev C:\xampp\htdocs\laravel-movies-example npm run development

[email protected] development C:\xampp\htdocs\laravel-movies-example cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js

98% after emitting SizeLimitsPlugin

ERROR Failed to compile with 2 errors 1:37:09 PM error in ./resources/css/app.css

Module build failed (from ./node_modules/css-loader/index.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js): Error: PostCSS plugin tailwindcss requires PostCSS 8. Migration guide for end-users: https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users at Processor.normalize (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:153:15) at new Processor (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:56:25) at postcss (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\postcss.js:55:10) at C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\src\index.js:140:12 at processTicksAndRejections (internal/process/task_queues.js:93:5) at C:\xampp\htdocs\laravel-movies-example\node_modules\webpack\lib\NormalModule.js:316:20 at C:\xampp\htdocs\laravel-movies-example\node_modules\loader-runner\lib\LoaderRunner.js:367:11 at C:\xampp\htdocs\laravel-movies-example\node_modules\loader-runner\lib\LoaderRunner.js:233:18 at context.callback (C:\xampp\htdocs\laravel-movies-example\node_modules\loader-runner\lib\LoaderRunner.js:111:13) at C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\src\index.js:208:9 at processTicksAndRejections (internal/process/task_queues.js:93:5)

error in ./resources/css/app.css

Module build failed (from ./node_modules/postcss-loader/src/index.js): Error: PostCSS plugin tailwindcss requires PostCSS 8. Migration guide for end-users: https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users at Processor.normalize (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:153:15) at new Processor (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:56:25) at postcss (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\postcss.js:55:10) at C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\src\index.js:140:12

@ ./resources/css/app.css 2:14-142

 Asset     Size   Chunks             Chunk Names

/js/app.js 597 KiB /js/app [emitted] /js/app

ERROR in ./resources/css/app.css Module build failed (from ./node_modules/css-loader/index.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js): Error: PostCSS plugin tailwindcss requires PostCSS 8. Migration guide for end-users: https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users at Processor.normalize (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:153:15) at new Processor (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:56:25) at postcss (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\postcss.js:55:10) at C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\src\index.js:140:12 at processTicksAndRejections (internal/process/task_queues.js:93:5) at C:\xampp\htdocs\laravel-movies-example\node_modules\webpack\lib\NormalModule.js:316:20 at C:\xampp\htdocs\laravel-movies-example\node_modules\loader-runner\lib\LoaderRunner.js:367:11 at C:\xampp\htdocs\laravel-movies-example\node_modules\loader-runner\lib\LoaderRunner.js:233:18 at context.callback (C:\xampp\htdocs\laravel-movies-example\node_modules\loader-runner\lib\LoaderRunner.js:111:13) at C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\src\index.js:208:9 at processTicksAndRejections (internal/process/task_queues.js:93:5) @ ./resources/css/app.css

ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) Module build failed (from ./node_modules/postcss-loader/src/index.js): Error: PostCSS plugin tailwindcss requires PostCSS 8. Migration guide for end-users: https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users at Processor.normalize (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:153:15) at new Processor (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:56:25) at postcss (C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\node_modules\postcss\lib\postcss.js:55:10) at C:\xampp\htdocs\laravel-movies-example\node_modules\postcss-loader\src\index.js:140:12 @ ./resources/css/app.css 2:14-142 npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! [email protected] development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the [email protected] development script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\PC\AppData\Roaming\npm-cache_logs\2021-05-27T11_37_16_434Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! [email protected] dev: npm run development npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the [email protected] dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\PC\AppData\Roaming\npm-cache_logs\2021-05-27T11_37_16_514Z-debug.log

Eugene Eugene · Accepted Answer · 2021-05-27T13:52:58

Try replacing your package.json with a package.json from a clean project.

package.json from a clean project:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.2.1",
        "alpinejs": "^2.7.3",
        "autoprefixer": "^10.1.0",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.2.1",
        "postcss-import": "^12.0.1",
        "tailwindcss": "^2.0.2"
    }
}

Trying to deploy Laravel app with tailwindcss on frontend. But, when i execute npm run dev i get an error

1 Answers