Laravel 中的 Tailwind 3 给出：错误：PostCSS 插件 tailwindcss 需要 PostCSS 8

Question

我正在尝试在我的 Laravel 应用程序中将 tailwind 升级到版本 3。

我按照中的说明进行了安装

https://tailwindcss.com/docs/upgrade-guide#upgrade-packages

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

这很好用。但是当我运行npm run dev 时，我得到了这个错误：

./resources/assets/css/tailwindcore.css 中的错误 模块构建失败（来自 ./node_modules/css-loader/index.js）： ModuleBuildError：模块构建失败（来自 ./node_modules/postcss-loader/src/index.js）： 错误：PostCSS 插件 tailwindcss 需要 PostCSS 8。

我从文档中了解到，tailwind 3 现在需要 PostCSS 8。但是，已经安装了 PostCSS 8。为什么我仍然会收到此错误？我也尝试删除 node_modules 文件夹并重新安装，但得到了同样的错误。

这是我的 package.json：

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --open --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.0",
        "axios": "^0.19",
        "babel-plugin-component": "^1.1.1",
        "bootstrap": "^4.5.2",
        "cross-env": "^7.0",
        "deepmerge": "^4.2.2",
        "fibers": "^4.0.2",
        "jquery": "^3.5.1",
        "laravel-mix": "^4.1.4",
        "laravel-mix-purgecss": "^5.0.0-rc.1",
        "lodash": "^4.17.20",
        "popper.js": "^1.12",
        "postcss": "^8.4.4",
        "purify-css": "^1.2.5",
        "purifycss-webpack": "^0.7.0",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.27.0",
        "sass-loader": "^7.3.1",
        "tailwindcss": "^3.0.0",
        "vue": "^2.6.12",
        "vue-template-compiler": "^2.6.12",
        "vuetifyjs-mix-extension": "0.0.2"
    },
    "dependencies": {
        "@tailwindcss/forms": "^0.3.3",
        "axiom": "^0.1.6",
        "buefy": "^0.9.7",
        "element-ui": "^2.13.1",
        "modal-video": "^2.4.2",
        "prod": "^1.0.1",
        "trumbowyg": "^2.21.0",
        "vue-multiselect": "^2.1.6",
        "vue-scrollto": "^2.19.1",
        "vue-select": "^3.11.2",
        "vue-trumbowyg": "^3.6.2",
        "vuetify": "^2.3.13",
        "vuetify-loader": "^1.6.0"
    }
}

我的 webpack.mix.js 设置：

.postCss("resources/assets/css/tailwindcore.css", "public/css", [
   require("tailwindcss"),
])

我的tailwind.config.js：

const colors = require('tailwindcss/colors')

module.exports = {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial-at-r': 'radial-gradient(ellipse at right, var(--tw-gradient-stops))',
      },
      colors: {
        lightblue: {
          DEFAULT: '#08c'
        },
        cyan: colors.cyan,
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [require('@tailwindcss/forms'),],
}

Answer 1

问题是您运行的是旧版本的 Laravel Mix。您将面临的另一个问题是@tailwindcss/form 插件也将need to be updated。

更新软件包：

npm install laravel-mix@latest @tailwindcss/forms@latest

然后，您需要更新 package.json 中的 scripts 以获取新版本的 Laravel Mix：

"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"
},