Laravel中的Tailwind3給出：錯誤：PostCSS插件tailwindcss需要PostCSS8

我正在嘗試在我的 Laravel 應用程式中將順風升級到版本 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） 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'),],
}

uj5u.com熱心網友回復：

問題是您運行的是舊版本的 Laravel Mix。您將面臨的另一個問題是@tailwindcss/form插件也需要更新。

使用以下命令更新軟體包：

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

然后你需要更新scripts你package.json的 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"
},

標籤：拉拉维尔 顺风-css

上一篇：PHPCarbon中的ceilMinute和ceilMinutes有什么區別？

下一篇：將偽列舉模型重構為列舉