Error: true is not a PostCSS plugin

[AdeSupriyadi]

postcss.config.js

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ],
};

package.json

"scripts": {
    "start": "npm run build:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/styles/tailwind.css -o src/styles/main.css"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.0.0",
    "postcss-cli": "^8.0.0",
    "tailwindcss": "^1.8.10"
  }

when yarn build:css its trow error:

Error: true is not a PostCSS plugin

Environment:
OS: ubuntu 20.04
IDE: viscode
Browser: chrome latest
tutorual-url: https://www.youtube.com/watch?v=hRFbqdJKRvQ

Any help

[Semigradsky]

@AdeSupriyadi tailwindcss hasn't postcss@8 support tailwindlabs/tailwindcss#2396.

[ai]

It happens if you use PostCSS 7 with PostCSS 8 plugins.

Ask your environment to update PostCSS or downgrade plugins.

[jesperp]

This will still happen for people who setup with just postcss-cli (similar to issue author's devDependencies)

# Not working
npm install postcss-cli tailwindcss autoprefixer

Here's how to solve it:

# Working
npm install tailwindcss postcss postcss-cli autoprefixer

[chainerprince]

I still doesn't work after I installed Tailwindcss3

[haoyinag]

I still doesn't work after I installed Tailwindcss3

same to me @ai

  System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 39.30 GB / 63.92 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
  Managers:
    pip3: 21.2.3 - C:\Python310\Scripts\pip3.EXE
  Utilities:
    Git: 2.33.0. - /mingw64/bin/git
  Virtualization:
    Docker: 20.10.8 - C:\Program Files\Docker\Docker\resources\bin\docker.EXE
  IDEs:
    VSCode: 1.65.0 - E:\program\Microsoft VS Code\bin\code.CMD
  Languages:
    Bash: 4.4.23 - C:\Program Files\Git\usr\bin\bash.EXE
    Perl: 5.34.0 - C:\Program Files\Git\usr\bin\perl.EXE
    Python: 3.10.0 - /c/Python310/python
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (99.0.1150.36)
    Internet Explorer: 11.0.19041.1202

  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "@ant-design/pro-descriptions": "^1.10.0",
    "@ant-design/pro-form": "^1.52.0",
    "@ant-design/pro-layout": "^6.32.0",
    "@ant-design/pro-table": "^2.61.0",
    "@micro-zoe/micro-app": "^0.8.5",
    "@umijs/bundler-webpack": "^3.5.21",
    "@umijs/route-utils": "^2.0.0",
    "ahooks": "^3.1.9",
    "antd": "^4.17.0",
    "bizcharts": "^4.1.15",
    "classnames": "^2.3.0",
    "immer": "^9.0.12",
    "js-file-download": "^0.4.12",
    "js-md5": "^0.7.3",
    "lodash": "^4.17.0",
    "moment": "^2.29.1",
    "nanoid": "^3.2.0",
    "omit.js": "^2.0.2",
    "postcss-import": "^14.0.2",
    "qs": "^6.10.3",
    "rc-menu": "^9.1.0",
    "rc-util": "^5.16.0",
    "react": "^17.0.0",
    "react-dev-inspector": "^1.7.0",
    "react-dom": "^17.0.0",
    "react-helmet-async": "^1.2.0",
    "umi": "^3.5.21"
  },
  "devDependencies": {
    "@ant-design/pro-cli": "^2.1.0",
    "@commitlint/cli": "^16.1.0",
    "@commitlint/config-conventional": "^16.0.0",
    "@playwright/test": "^1.17.0",
    "@types/express": "^4.17.0",
    "@types/history": "^4.7.0",
    "@types/jest": "^26.0.0",
    "@types/lodash": "^4.14.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-helmet": "^6.1.0",
    "@umijs/fabric": "^2.8.0",
    "@umijs/openapi": "^1.3.0",
    "@umijs/plugin-blocks": "^2.2.0",
    "@umijs/plugin-esbuild": "^1.4.0",
    "@umijs/plugin-openapi": "^1.3.0",
    "@umijs/preset-ant-design-pro": "^1.3.0",
    "@umijs/preset-dumi": "^1.1.0",
    "@umijs/preset-react": "^1.8.17",
    "@umijs/yorkie": "^2.0.5",
    "autoprefixer": "^10.4.2",
    "carlo": "^0.9.46",
    "cross-env": "^7.0.0",
    "cross-port-killer": "^1.3.0",
    "detect-installer": "^1.0.0",
    "enzyme": "^3.11.0",
    "eslint": "^7.32.0",
    "express": "^4.17.0",
    "gh-pages": "^3.2.0",
    "husky": "4.3.8",
    "jsdom-global": "^3.0.0",
    "lint-staged": "^10.0.0",
    "mockjs": "^1.1.0",
    "postcss": "^8.4.8",
    "postcss-cli": "^9.1.0",
    "postcss-loader": "^6.2.1",
    "prettier": "^2.5.0",
    "puppeteer-core": "^8.0.0",
    "stylelint": "^13.0.0",
    "swagger-ui-react": "^3.52.0",
    "tailwindcss": "^3.0.23",
    "typescript": "^4.5.0",
    "umi-serve": "^1.9.10"
  },