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

…22709)
nrwl · Apr 8, 2024 · 50d89c7 · 50d89c7
1 parent 53d7913
commit 50d89c7
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 19 deletions.
diff --git a/docs/generated/packages/next/generators/application.json b/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 ]"

diff --git a/packages/next/src/generators/application/application.ts b/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')),

diff --git a/packages/next/src/generators/application/lib/create-application-files.ts b/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

diff --git a/packages/next/src/generators/application/lib/normalize-options.ts b/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;
 

diff --git a/packages/next/src/generators/application/schema.json b/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 ]"

diff --git a/packages/react/src/generators/setup-tailwind/lib/add-tailwind-style-imports.ts b/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 = [
-  // Plain React
-  'src/styles.css',
-  'src/styles.scss',
-  'src/styles.less',
+// base directories and file types to simplify locating the stylesheet
+const baseDirs = ['src', 'pages', 'src/pages', 'src/app', 'app'];
+const fileNames = ['styles', 'global'];
+const extensions = ['.css', '.scss', '.less'];
 
-  // Next.js
-  'pages/styles.css',
-  'pages/styles.scss',
-  'pages/styles.less',
-
-  'app/global.css',
-  'app/global.scss',
-  'app/global.less',
-];
+const knownLocations = baseDirs.flatMap((dir) =>
+  fileNames.flatMap((name) => extensions.map((ext) => `${dir}/${name}${ext}`))
+);
 
 export function addTailwindStyleImports(
   tree: Tree,
   project: ProjectConfiguration,
   _options: SetupTailwindOptions
 ) {
-  const candidates = knownLocations.map((x) =>
-    joinPathFragments(project.root, x)
+  const candidates = knownLocations.map((currentPath) =>
+    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();