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

Posted 2023-03-06

【中文标题】Laravel 中的 Tailwind 3 给出：错误：PostCSS 插件 tailwindcss 需要 PostCSS 8

【英文标题】：Tailwind 3 in Laravel gives: Error: PostCSS plugin tailwindcss requires PostCSS 8

【发布时间】：2022-01-14 23:43:27

【问题描述】：

我正在尝试在我的 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'),],

【参考方案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"
,

【讨论】：

谢谢。为了安装最新的 laravel-mix 和表单，我首先必须像 npm uninstall tailwindcss postcss autoprefixer 那样删除 tailwind 并删除 tailwind-form。现在安装成功了。我现在有 21 个编译错误需要修复。我会尝试解决它们并让你知道它是否有效。

我收到“TypeError：无法读取未定义的属性‘resolve’”。有什么想法吗？

@S.Farooq 这可能是您的 node/npm 版本的问题。您可能需要更新它。话虽如此，这超出了原始问题的范围，因此如果您仍有问题，我建议您提出一个新问题。