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 (
+
+
+
+ );
+}
+
+export default App;
+"
+`;
+
exports[`react app generator (legacy) should setup vite 1`] = `
"///
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: [],