diff --git a/e2e/next/src/next-styles.test.ts b/e2e/next/src/next-styles.test.ts
index 86199c6f5c..cbbc5cda59 100644
--- a/e2e/next/src/next-styles.test.ts
+++ b/e2e/next/src/next-styles.test.ts
@@ -1,4 +1,12 @@
-import { cleanupProject, newProject, runCLI, uniq } from '@nx/e2e/utils';
+import {
+  checkFilesDoNotExist,
+  checkFilesExist,
+  cleanupProject,
+  newProject,
+  runCLI,
+  uniq,
+  readFile,
+} from '@nx/e2e/utils';
 import { checkApp } from './utils';
 
 describe('Next.js Styles', () => {
@@ -73,4 +81,56 @@ describe('Next.js Styles', () => {
       checkExport: false,
     });
   }, 600_000);
+
+  describe('tailwind', () => {
+    it('should support --style=tailwind (pages router)', async () => {
+      const tailwindApp = uniq('app');
+
+      runCLI(
+        `generate @nx/next:app ${tailwindApp} --no-interactive --style=tailwind --appDir=false --src=false`
+      );
+
+      await checkApp(tailwindApp, {
+        checkUnitTest: true,
+        checkLint: false,
+        checkE2E: false,
+        checkExport: false,
+      });
+
+      checkFilesExist(`apps/${tailwindApp}/tailwind.config.js`);
+      checkFilesExist(`apps/${tailwindApp}/postcss.config.js`);
+
+      checkFilesDoNotExist(`apps/${tailwindApp}/pages/index.module.css`);
+      const appPage = readFile(`apps/${tailwindApp}/pages/index.tsx`);
+      const globalCss = readFile(`apps/${tailwindApp}/pages/styles.css`);
+
+      expect(appPage).not.toContain(`import styles from './index.module.css';`);
+      expect(globalCss).toContain(`@tailwind base;`);
+    }, 500_000);
+
+    it('should support --style=tailwind (app router)', async () => {
+      const tailwindApp = uniq('app');
+
+      runCLI(
+        `generate @nx/next:app ${tailwindApp} --no-interactive --style=tailwind --appDir=true --src=false`
+      );
+
+      await checkApp(tailwindApp, {
+        checkUnitTest: true,
+        checkLint: false,
+        checkE2E: false,
+        checkExport: false,
+      });
+
+      checkFilesExist(`apps/${tailwindApp}/tailwind.config.js`);
+      checkFilesExist(`apps/${tailwindApp}/postcss.config.js`);
+
+      checkFilesDoNotExist(`apps/${tailwindApp}/app/page.module.css`);
+      const appPage = readFile(`apps/${tailwindApp}/app/page.tsx`);
+      const globalCss = readFile(`apps/${tailwindApp}/app/global.css`);
+
+      expect(appPage).not.toContain(`import styles from './page.module.css';`);
+      expect(globalCss).toContain(`@tailwind base;`);
+    }, 500_000);
+  });
 });
diff --git a/packages/next/src/generators/application/files/app/page.tsx__tmpl__ b/packages/next/src/generators/application/files/app/page.tsx__tmpl__
index d99b4627f8..02c10f195f 100644
--- a/packages/next/src/generators/application/files/app/page.tsx__tmpl__
+++ b/packages/next/src/generators/application/files/app/page.tsx__tmpl__
@@ -7,7 +7,7 @@
   %>import styled from '<%= styledModule %>';<% } else {
     var wrapper = 'div';
   %>
-    <%- style !== 'styled-jsx' ? `import styles from './page.module.${style}';` : '' %>
+    <%- (style !== 'styled-jsx' && style !== 'tailwind') ? `import styles from './page.module.${style}';` : '' %>
   <% }
   %>
 
@@ -22,9 +22,9 @@ export default function Index() {
    * Note: The corresponding styles are in the ./<%= fileName %>.<%= style %> file.
    */
   return (
-    <<%= wrapper %><% if (!styledModule) {%> className={styles.page}<% } %>>
+    <<%= wrapper %><% if (!styledModule && style !== 'tailwind') {%> className={styles.page}<% } %>>
       <%- styledModule === 'styled-jsx' && style !== 'none' ? `<style jsx>{\`${pageStyleContent}\`}</style>` : `` %>
       <%- appContent %>
     </<%= wrapper %>>
   );
-};
\ No newline at end of file
+};
diff --git a/packages/next/src/generators/application/files/pages/__fileName__.tsx__tmpl__ b/packages/next/src/generators/application/files/pages/__fileName__.tsx__tmpl__
index 638fdd747a..d667c13fc2 100644
--- a/packages/next/src/generators/application/files/pages/__fileName__.tsx__tmpl__
+++ b/packages/next/src/generators/application/files/pages/__fileName__.tsx__tmpl__
@@ -4,7 +4,7 @@
   %>import styled from '<%= styledModule %>';<% } else {
     var wrapper = 'div';
   %>
-    <%- style !== 'styled-jsx' ? `import styles from './${fileName}.module.${style}';` : '' %>
+    <%- (style !== 'styled-jsx' && style !== 'tailwind') ? `import styles from './${fileName}.module.${style}';` : '' %>
   <% }
   %>
 
@@ -20,7 +20,7 @@ export function Index() {
    * Note: The corresponding styles are in the ./<%= fileName %>.<%= style %> file.
    */
   return (
-    <<%= wrapper %><% if (!styledModule) {%> className={styles.page}<% } %>>
+    <<%= wrapper %><% if (!styledModule && style !== 'tailwind') {%> className={styles.page}<% } %>>
       <%- styledModule === 'styled-jsx' && style !== 'none' ? `<style jsx>{\`${pageStyleContent}\`}</style>` : `` %>
       <%- appContent %>
     </<%= wrapper %>>
diff --git a/packages/next/src/generators/application/lib/create-application-files.ts b/packages/next/src/generators/application/lib/create-application-files.ts
index 9a0ea779af..152bd5d666 100644
--- a/packages/next/src/generators/application/lib/create-application-files.ts
+++ b/packages/next/src/generators/application/lib/create-application-files.ts
@@ -56,7 +56,6 @@ export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
     pageStyleContent: `.page {}`,
 
     stylesExt: options.style === 'less' ? options.style : 'css',
-    style: options.style === 'tailwind' ? 'css' : options.style,
   };
 
   const generatedAppFilePath = options.src
@@ -165,7 +164,7 @@ export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
     host.delete(`${options.appProjectRoot}/.babelrc`);
   }
 
-  if (options.styledModule) {
+  if (options.styledModule || options.style === 'tailwind') {
     if (options.appDir) {
       host.delete(`${generatedAppFilePath}/app/page.module.${options.style}`);
     } else {