fix(@schematics/angular): update the PostCSS configuration used by the build in tailwind

The tailwind schematic searched the workspace root before the project root and `.postcssrc.json`
before `postcss.config.json`, the opposite of the build system. With a configuration in both
locations, the schematic added `@tailwindcss/postcss` to a file the build never reads, so the
build succeeded but Tailwind CSS utilities were not generated.

Search the project root first and `postcss.config.json` first, matching the build system.

Author: MeAkib

packages/schematics/angular/tailwind/index.ts

@@ -34,7 +34,8 @@ import { createProjectSchematic } from '../utility/project';
 import { Schema as TailwindOptions } from './schema';
 
 const TAILWIND_DEPENDENCIES = ['tailwindcss', '@tailwindcss/postcss', 'postcss'];
-const POSTCSS_CONFIG_FILES = ['.postcssrc.json', 'postcss.config.json'];
+// Same lookup order as the build system, so the configuration that gets updated is the one used.
+const POSTCSS_CONFIG_FILES = ['postcss.config.json', '.postcssrc.json'];
 
 function addTailwindStyles(options: { project: string }, project: ProjectDefinition): Rule {
   return async (tree) => {
@@ -94,7 +95,7 @@ function addTailwindStyles(options: { project: string }, project: ProjectDefinit
 
 function managePostCssConfiguration(project: ProjectDefinition): Rule {
   return async (tree) => {
-    const searchPaths = ['/', project.root]; // Workspace root and project root
+    const searchPaths = [project.root, '/']; // Project root and workspace root
 
     for (const path of searchPaths) {
       for (const configFile of POSTCSS_CONFIG_FILES) {

packages/schematics/angular/tailwind/index_spec.ts

@@ -128,6 +128,28 @@ describe('Tailwind Schematic', () => {
       expect(postCssConfig.plugins['autoprefixer']).toBeDefined();
       expect(tree.exists('/projects/bar/.postcssrc.json')).toBe(false);
     });
+
+    it('should prefer a project root configuration over a workspace root configuration', async () => {
+      appTree.create('/.postcssrc.json', JSON.stringify({ plugins: {} }));
+      appTree.create('/projects/bar/postcss.config.json', JSON.stringify({ plugins: {} }));
+      const tree = await schematicRunner.runSchematic('tailwind', { project: 'bar' }, appTree);
+
+      const projectConfig = JSON.parse(tree.readContent('/projects/bar/postcss.config.json'));
+      expect(projectConfig.plugins['@tailwindcss/postcss']).toBeDefined();
+      const workspaceConfig = JSON.parse(tree.readContent('/.postcssrc.json'));
+      expect(workspaceConfig.plugins['@tailwindcss/postcss']).toBeUndefined();
+    });
+
+    it('should prefer postcss.config.json over .postcssrc.json in the same directory', async () => {
+      appTree.create('/projects/bar/.postcssrc.json', JSON.stringify({ plugins: {} }));
+      appTree.create('/projects/bar/postcss.config.json', JSON.stringify({ plugins: {} }));
+      const tree = await schematicRunner.runSchematic('tailwind', { project: 'bar' }, appTree);
+
+      const config = JSON.parse(tree.readContent('/projects/bar/postcss.config.json'));
+      expect(config.plugins['@tailwindcss/postcss']).toBeDefined();
+      const rcConfig = JSON.parse(tree.readContent('/projects/bar/.postcssrc.json'));
+      expect(rcConfig.plugins['@tailwindcss/postcss']).toBeUndefined();
+    });
   });
 
   describe('with non-workspace stylesheets', () => {