使用 TailwindCSS 失败的 npm run dev Laravel答案

【问题标题】：Failed npm run dev Laravel with TailwindCSS使用 TailwindCSS 失败的 npm run dev Laravel
【发布时间】：2021-03-25 22:27:18
【问题描述】：

我只是按照https://tailwindcss.com/docs/guides/laravel 的指示，但我无法将顺风连接到 laravel 项目

在cmd中：

sh: cross-env: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the @ 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!     /Users/testing/.npm/_logs/2020-12-15T09_27_32_113Z-debug.log

资源/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

资源/视图/welcome.blade.php

...
   <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
...

webpack.mix.js

mix.js("resources/js/app.js", "public/js").postCss(
    "resources/css/app.css",
    "public/css",
    [require("tailwindcss")]
);

package.json

  "devDependencies": {
        "@tailwindcss/postcss7-compat": "^2.0.2",
        "autoprefixer": "^9.8.6",
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "postcss": "^7.0.35",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2"
    },

【问题讨论】：

cross-env 在您的依赖项中。您在创建项目后是否运行了npm install？尝试运行npm install && npm run dev
天哪，我忘记了那个命令哈哈。非常感谢@ScottBrown。
哈哈没问题，我们都曾经做过类似的事情（咳咳……stackoverflow.com/questions/10731246/…）

标签： laravel tailwind-css

【解决方案1】：

我遇到了同样的问题，我用下面的方法解决了。

参考链接：https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

https://github.com/tailwindlabs/tailwindcss/discussions/2854

运行此命令

sudo npm uninstall tailwindcss postcss autoprefixer

然后这个命令

sudo npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 自动前缀@^9

现在运行以下命令

sudo npm 安装

sudo npm 运行开发

【讨论】：