Error: Malformed PostCSS Configuration - NextJS

Current Behavior

Got an PostCSS Error

Expected Behavior

No error.

Steps to Reproduce

npm i @nrwl/next (use css only, option 1)
nx g @nrwl/next:app some-app

Failure Logs

~ ❯ nx serve some-app

> nx run some-app:serve

We detected TypeScript in your project and reconfigured your tsconfig.json file for you. Strict-mode is set to false by default.

The following suggested values were added to your tsconfig.json. These values can be changed to fit your project's needs:

	- lib was set to dom,dom.iterable,esnext
	- incremental was set to true

info  - automatically enabled Fast Refresh for 1 custom loader
Error: A PostCSS Plugin was passed as a function using require(), but it must be provided as a string.
Read more: https://nextjs.org/docs/messages/postcss-shape
error - ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./pages/styles.css
Error: Malformed PostCSS Configuration
    at Array.forEach (<anonymous>)
[ ready ] on http://localhost:4200

Environment

>  NX   Report complete - copy this into the issue template

  Node : 16.4.0
  OS   : darwin x64
  npm  : 7.18.1

  nx : 13.7.3
  @nrwl/angular : undefined
  @nrwl/cli : 13.7.3
  @nrwl/cypress : 13.7.3
  @nrwl/detox : undefined
  @nrwl/devkit : 13.7.3
  @nrwl/eslint-plugin-nx : 13.7.3
  @nrwl/express : undefined
  @nrwl/jest : 13.7.3
  @nrwl/js : 13.7.3
  @nrwl/linter : 13.7.3
  @nrwl/nest : undefined
  @nrwl/next : 13.7.3
  @nrwl/node : undefined
  @nrwl/nx-cloud : 13.1.2
  @nrwl/react : 13.7.3
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/storybook : 13.7.3
  @nrwl/tao : 13.7.3
  @nrwl/web : 13.7.3
  @nrwl/workspace : 13.7.3
  typescript : 4.5.5
  rxjs : 6.6.7
  ---------------------------------------
  Community plugins:

[Devkant21]

@krailler I was able to fix the issue at my end when i used the following in the postcss.config.js file

module.exports = { plugins: [ 'postcss-import', 'tailwindcss/nesting', 'tailwindcss', 'autoprefixer', ] }

initially my codes were :

I hope it helps.

[tech3br]

@krailler I was able to fix the issue at my end when i used the following in the postcss.config.js file

module.exports = { plugins: [ 'postcss-import', 'tailwindcss/nesting', 'tailwindcss', 'autoprefixer', ] }

initially my codes were :

I hope it helps.

thanks bro