Tailwind 3 in Laravel gives: Error: PostCSS plugin tailwindcss requires PostCSS 8-CodePudding

I am trying to upgrade tailwind to version 3 in my Laravel application.

I followed the installation as instructed in

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

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

This worked fine. But when I run npm run dev I get this error:

ERROR in ./resources/assets/css/tailwindcore.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.

I have read from the docs that PostCSS 8 is now required with tailwind 3. However, PostCSS 8 has been installed. Why would I still receive this error? I also tried to remove node_modules folder and reinstall, but got same error.

This is my 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"
    }
}

my webpack.mix.js setting:

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

my 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'),],
}

CodePudding user response：

The issue is that you're running an old version of Laravel Mix. Another issue you will face is the @tailwindcss/form plugin will need to be updated as well.

Update the packages with:

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

You will then need to update the scripts in your package.json for the new version of 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"
},