fix(@angular-devkit/build-angular): detect tailwind.config.cjs as valid tailwinds configuration

`tailwind.config.cjs` is a valid tailwindcss configuration file as it's listed in https://github.com/tailwindlabs/tailwindcss/blob/8845d112fb62d79815b50b3bae80c317450b8b92/src/util/resolveConfigPath.js#L46-L52 as such we should also take this filename into consideration.

Closes angular#23236

Author: alan-agius4

packages/angular_devkit/build_angular/src/webpack/configs/styles.ts

@@ -122,13 +122,17 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
 
   // Attempt to setup Tailwind CSS
   // A configuration file can exist in the project or workspace root
-  const tailwindConfigFile = 'tailwind.config.js';
+  // The list of valid config files can be found:
+  // https://github.com/tailwindlabs/tailwindcss/blob/8845d112fb62d79815b50b3bae80c317450b8b92/src/util/resolveConfigPath.js#L46-L52
+  const tailwindConfigFiles = ['tailwind.config.js', 'tailwind.config.cjs'];
   let tailwindConfigPath;
-  for (const basePath of [wco.projectRoot, wco.root]) {
-    const fullPath = path.join(basePath, tailwindConfigFile);
-    if (fs.existsSync(fullPath)) {
-      tailwindConfigPath = fullPath;
-      break;
+  for (const configFile of tailwindConfigFiles) {
+    for (const basePath of [wco.projectRoot, wco.root]) {
+      const fullPath = path.join(basePath, configFile);
+      if (fs.existsSync(fullPath)) {
+        tailwindConfigPath = fullPath;
+        break;
+      }
     }
   }
   // Only load Tailwind CSS plugin if configuration file was found.

tests/legacy-cli/e2e/tests/build/styles/tailwind-v3-cjs.ts

@@ -0,0 +1,39 @@
+import { expectFileToMatch, moveFile, writeFile } from '../../../utils/fs';
+import { installPackage } from '../../../utils/packages';
+import { ng, silentExec } from '../../../utils/process';
+import { updateJsonFile } from '../../../utils/project';
+import { expectToFail } from '../../../utils/utils';
+
+export default async function () {
+  // Temporarily turn off caching until the build cache accounts for the presence of tailwind
+  // and its configuration file. Otherwise cached builds without tailwind will cause test failures.
+  await ng('cache', 'off');
+
+  // Add type module in package.json.
+  await updateJsonFile('package.json', (json) => {
+    json['type'] = 'module';
+  });
+
+  // Install Tailwind
+  await installPackage('tailwindcss@3');
+
+  // Create configuration file
+  await silentExec('npx', 'tailwindcss', 'init');
+
+  // tailwind doesn't create the config file with a cjs extension.
+  // We need to rename it manually until
+  // https://github.com/tailwindlabs/tailwindcss/commit/6c63f67d20c433b5c7281e9e26744038ed41ccc2 is released.
+  await moveFile('tailwind.config.js', 'tailwind.config.cjs');
+
+  // Add Tailwind directives to a global style
+  await writeFile('src/styles.css', '@tailwind base; @tailwind components;');
+
+  // Build should succeed and process Tailwind directives
+  await ng('build', '--configuration=development');
+
+  // Check for Tailwind output
+  await expectFileToMatch('dist/test-project/styles.css', /::placeholder/);
+  await expectToFail(() =>
+    expectFileToMatch('dist/test-project/styles.css', '@tailwind base; @tailwind components;'),
+  );
+}