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

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

@@ -121,19 +121,10 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
   const extraPostcssPlugins: import('postcss').Plugin[] = [];
 
   // Attempt to setup Tailwind CSS
-  // A configuration file can exist in the project or workspace root
-  const tailwindConfigFile = 'tailwind.config.js';
-  let tailwindConfigPath;
-  for (const basePath of [wco.projectRoot, wco.root]) {
-    const fullPath = path.join(basePath, tailwindConfigFile);
-    if (fs.existsSync(fullPath)) {
-      tailwindConfigPath = fullPath;
-      break;
-    }
-  }
   // Only load Tailwind CSS plugin if configuration file was found.
   // This acts as a guard to ensure the project actually wants to use Tailwind CSS.
   // The package may be unknowningly present due to a third-party transitive package dependency.
+  const tailwindConfigPath = getTailwindConfigPath(wco);
   if (tailwindConfigPath) {
     let tailwindPackagePath;
     try {
@@ -402,3 +393,21 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
     plugins: extraPlugins,
   };
 }
+
+function getTailwindConfigPath({ projectRoot, root }: WebpackConfigOptions): string | undefined {
+  // A configuration file can exist in the project or workspace root
+  // 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'];
+  for (const basePath of [projectRoot, root]) {
+    for (const configFile of tailwindConfigFiles) {
+      // Irrespective of the name project level configuration should always take precedence.
+      const fullPath = path.join(basePath, configFile);
+      if (fs.existsSync(fullPath)) {
+        return fullPath;
+      }
+    }
+  }
+
+  return undefined;
+}

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;'),
+  );
+}