fix(nextjs): Adding tailwind should work when creating an app OOTB (#22709)

docs/generated/packages/next/generators/application.json

@@ -46,6 +46,10 @@
               "value": "less",
               "label": "LESS              [ https://lesscss.org            ]"
             },
+            {
+              "value": "tailwind",
+              "label": "tailwind          [ https://tailwindcss.com/       ]"
+            },
             {
               "value": "styled-components",
               "label": "styled-components [ https://styled-components.com ]"

packages/next/src/generators/application/application.ts

@@ -7,6 +7,7 @@ import {
   Tree,
 } from '@nx/devkit';
 import { initGenerator as jsInitGenerator } from '@nx/js';
+import { setupTailwindGenerator } from '@nx/react';
 import {
   testingLibraryReactVersion,
   typesReactDomVersion,
@@ -70,6 +71,14 @@ export async function applicationGeneratorInternal(host: Tree, schema: Schema) {
   const lintTask = await addLinting(host, options);
   tasks.push(lintTask);
 
+  if (options.style === 'tailwind') {
+    const tailwindTask = await setupTailwindGenerator(host, {
+      project: options.projectName,
+    });
+
+    tasks.push(tailwindTask);
+  }
+
   const styledTask = addStyleDependencies(host, {
     style: options.style,
     swc: !host.exists(joinPathFragments(options.appProjectRoot, '.babelrc')),

packages/next/src/generators/application/lib/create-application-files.ts

@@ -56,6 +56,7 @@ 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

packages/next/src/generators/application/lib/normalize-options.ts

@@ -94,7 +94,7 @@ export async function normalizeOptions(
   const appDir = options.appDir ?? true;
   const src = options.src ?? true;
 
-  const styledModule = /^(css|scss|less)$/.test(options.style)
+  const styledModule = /^(css|scss|less|tailwind)$/.test(options.style)
     ? null
     : options.style;
 

packages/next/src/generators/application/schema.json

@@ -46,6 +46,10 @@
             "value": "less",
             "label": "LESS              [ https://lesscss.org            ]"
           },
+          {
+            "value": "tailwind",
+            "label": "tailwind          [ https://tailwindcss.com/       ]"
+          },
           {
             "value": "styled-components",
             "label": "styled-components [ https://styled-components.com ]"

packages/react/src/generators/setup-tailwind/lib/add-tailwind-style-imports.ts

@@ -5,35 +5,29 @@ import {
   stripIndents,
   Tree,
 } from '@nx/devkit';
-import * as chalk from 'chalk';
 
 import { SetupTailwindOptions } from '../schema';
 
-const knownLocations = [
+// base directories and file types to simplify locating the stylesheet
-  // Plain React
+const baseDirs = ['src', 'pages', 'src/pages', 'src/app', 'app'];
-  'src/styles.css',
+const fileNames = ['styles', 'global'];
-  'src/styles.scss',
+const extensions = ['.css', '.scss', '.less'];
-  'src/styles.less',
 
-  // Next.js
+const knownLocations = baseDirs.flatMap((dir) =>
-  'pages/styles.css',
+  fileNames.flatMap((name) => extensions.map((ext) => `${dir}/${name}${ext}`))
-  'pages/styles.scss',
+);
-  'pages/styles.less',
-
-  'app/global.css',
-  'app/global.scss',
-  'app/global.less',
-];
 
 export function addTailwindStyleImports(
   tree: Tree,
   project: ProjectConfiguration,
   _options: SetupTailwindOptions
 ) {
-  const candidates = knownLocations.map((x) =>
+  const candidates = knownLocations.map((currentPath) =>
-    joinPathFragments(project.root, x)
+    joinPathFragments(project.root, currentPath)
+  );
+  const stylesPath = candidates.find((currentStylePath) =>
+    tree.exists(currentStylePath)
   );
-  const stylesPath = candidates.find((x) => tree.exists(x));
 
   if (stylesPath) {
     const content = tree.read(stylesPath).toString();