fix(@angular-devkit/build-angular): add tailwindcss support for version 3

[alan-agius4]

No description provided.

[dgp1130]

I'm assuming this is ok to remove because we don't support Node v10 in Angular CLI v13.1.x? Slightly unrelated: Have we explicitly documented our Node support anywhere? Best I could find was on our getting started page, but I'm not sure if that applies to all CLI versions, and I know we care about Node minor releases in some instances.

[alan-agius4]

Indeed that is the only place we list the node versions that we support. I think they could be better listed in table or something like that.

Re Node 10, we don’t support this since v12

[filipwiniarski]

I wonder if that's all what should be covered 🤔 Since Angular moved to ESM modules imports in scss files throw an error:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

module.exports = {
  prefix: '',
  content: ['./{libs,apps}/**/*.{html,ts,scss}'],
  darkMode: 'class',
  theme: {},
  plugins: [],
};

./apps/docs/src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./apps/docs/src/styles.scss - Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/filipwiniarski/Documents/___/tailwind.config.js from /Users/filipwiniarski/Documents/___/node_modules/tailwindcss/lib/lib/setupWatchingContext.js not supported.
Instead change the require of tailwind.config.js in /Users/filipwiniarski/Documents/___/node_modules/tailwindcss/lib/lib/setupWatchingContext.js to a dynamic import() which is available in all CommonJS modules.
    at Module.require (/Users/filipwiniarski/Documents/___/node_modules/@nrwl/tao/src/compat/compat.js:13:40)
    at getTailwindConfig (/Users/filipwiniarski/Documents/___/node_modules/tailwindcss/lib/lib/setupWatchingContext.js:167:53)
    at /Users/filipwiniarski/Documents/___/node_modules/tailwindcss/lib/lib/setupWatchingContext.js:227:92
    at /Users/filipwiniarski/Documents/___/node_modules/tailwindcss/lib/processTailwindFeatures.js:37:11
    at plugins (/Users/filipwiniarski/Documents/___/node_modules/tailwindcss/lib/index.js:22:68)
    at LazyResult.runOnRoot (/Users/filipwiniarski/Documents/___/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/lazy-result.js:339:16)
    at LazyResult.runAsync (/Users/filipwiniarski/Documents/___/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/lazy-result.js:393:26)
    at async Object.loader (/Users/filipwiniarski/Documents/___/node_modules/postcss-loader/dist/index.js:97:14)

I did find TailwindCSS ESM support: tailwindlabs/tailwindcss#3181. Changing tailwind.config.js to .cjs solves above issue, although Tailwind stops working in an Angular project in that situation.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}