From 55251ca0bf79b18b907ff9aeeb0946ff0efb6923 Mon Sep 17 00:00:00 2001
From: Jack Hsu <jack.hsu@gmail.com>
Date: Fri, 20 Jun 2025 15:02:27 -0400
Subject: [PATCH] fix(react): do not set styles.tailwind for executor options
 for projects not using inferred targets (#31667)

This PR fixes an issue when you use React with Webpack/Rspack, and
aren't using `@nx/webpack/plugin` or `@nx/rspack/plugin`.



<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
Project configuration contains this for build options:

```
"styles": ["src/myapp/styles.tailwind"]
```

## Expected Behavior


It shoud be :

```
"styles": ["src/myapp/styles.css"]
```

Which is what we actually generate.
---
 .../application.legacy.spec.ts.snap           | 15 ++++++++
 .../application/application.legacy.spec.ts    | 34 +++++++++++++++++++
 .../generators/application/lib/add-project.ts |  8 +++--
 3 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/generators/application/__snapshots__/application.legacy.spec.ts.snap b/packages/react/src/generators/application/__snapshots__/application.legacy.spec.ts.snap
index e333edf1b0..76638bfa47 100644
--- a/packages/react/src/generators/application/__snapshots__/application.legacy.spec.ts.snap
+++ b/packages/react/src/generators/application/__snapshots__/application.legacy.spec.ts.snap
@@ -1,5 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`react app generator (legacy) --style tailwind should not generate any styles files 1`] = `
+"import NxWelcome from './nx-welcome';
+
+export function App() {
+  return (
+    <div>
+      <NxWelcome title="my-app" />
+    </div>
+  );
+}
+
+export default App;
+"
+`;
+
 exports[`react app generator (legacy) should setup vite 1`] = `
 "/// <reference types='vitest' />
 import { defineConfig } from 'vite';
diff --git a/packages/react/src/generators/application/application.legacy.spec.ts b/packages/react/src/generators/application/application.legacy.spec.ts
index a88ba0b834..e935e1dabf 100644
--- a/packages/react/src/generators/application/application.legacy.spec.ts
+++ b/packages/react/src/generators/application/application.legacy.spec.ts
@@ -142,4 +142,38 @@ describe('react app generator (legacy)', () => {
       appTree.read('my-vite-app/vite.config.ts', 'utf-8')
     ).toMatchSnapshot();
   });
+
+  describe('--style tailwind', () => {
+    it('should not generate any styles files', async () => {
+      await applicationGenerator(appTree, { ...schema, style: 'tailwind' });
+
+      expect(appTree.exists('my-app/src/app/app.tsx')).toBeTruthy();
+      expect(appTree.exists('my-app/src/app/app.spec.tsx')).toBeTruthy();
+      expect(appTree.exists('my-app/src/app/app.css')).toBeFalsy();
+      expect(appTree.exists('my-app/src/app/app.scss')).toBeFalsy();
+      expect(appTree.exists('my-app/src/app/app.module.css')).toBeFalsy();
+      expect(appTree.exists('my-app/src/app/app.module.scss')).toBeFalsy();
+
+      const content = appTree.read('my-app/src/app/app.tsx').toString();
+      expect(content).toMatchSnapshot();
+    });
+
+    it.each`
+      bundler
+      ${'webpack'}
+      ${'rspack'}
+    `('should generate styles.css not styles.tailwind', async ({ bundler }) => {
+      await applicationGenerator(appTree, {
+        ...schema,
+        style: 'tailwind',
+        bundler,
+      });
+
+      // Should not have `styles.tailwind` in build options since it's not valid -- it needs to be styles.css.
+      const projectConfig = readProjectConfiguration(appTree, 'my-app');
+      expect(projectConfig.targets.build.options.styles).toEqual([
+        'my-app/src/styles.css',
+      ]);
+    });
+  });
 });
diff --git a/packages/react/src/generators/application/lib/add-project.ts b/packages/react/src/generators/application/lib/add-project.ts
index e2c23a5f0d..a362dfd852 100644
--- a/packages/react/src/generators/application/lib/add-project.ts
+++ b/packages/react/src/generators/application/lib/add-project.ts
@@ -123,7 +123,9 @@ function createRspackBuildTarget(
           : [
               joinPathFragments(
                 options.appProjectRoot,
-                `src/styles.${options.style}`
+                `src/styles.${
+                  options.style === 'tailwind' ? 'css' : options.style
+                }`
               ),
             ],
       scripts: [],
@@ -199,7 +201,9 @@ function createBuildTarget(options: NormalizedSchema): TargetConfiguration {
           : [
               joinPathFragments(
                 options.appProjectRoot,
-                `src/styles.${options.style}`
+                `src/styles.${
+                  options.style === 'tailwind' ? 'css' : options.style
+                }`
               ),
             ],
       scripts: [],