Add support for configuring PostCSS for Angular projects

I created new nx/angular project with tailwind and storybook. All works fine, but now I need to add postcss nesting plugin, like postcss-nested or tailwindcss/nesting. I created postcss.config.js in my app and lib directory with following config

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

Current Behavior

I got “Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin before Tailwind in your configuration.” message in build log. Seems like nx doesn’t respect postcss.config.js.

Expected Behavior

Should be possibe to add postcss-plugins.

Environment

Node : 16.13.0
   OS   : win32 x64
   yarn : 1.22.17

   nx : 13.8.3
   @nrwl/angular : 13.8.3
   @nrwl/cli : 13.8.3
   @nrwl/cypress : 13.8.3
   @nrwl/detox : undefined
         @angular/cli: 13.2.5
         @angular/compiler-cli: 13.2.4
         @angular/language-service: 13.2.4
         @storybook/angular: 6.4.19

[ambeur]

Yes, i tried, but it looks like postcss.config.js just ignored by builder.

[leosvelperez]

@zvnt you need to be careful not to overwrite the default Angular CLI webpack configuration for styles. The above will replace the rule configuration for the .css extension. Instead, you could use the function syntax that receives the base webpack configuration and update it with the changes you need:

module.exports = config => {
	// add your logic here updating the config
};

That way, you can obtain the specific rule(s) you want to update from the base configuration and make the needed changes without losing any functionality. You can take a look at some docs/examples updating the webpack config in a similar way to get an idea:

https://indepth.dev/posts/1294/angular-css-modules https://github.com/angular/angular-cli/issues/8427#issuecomment-751520349