From adad23c9ea986a07302442a03ae7c0b3e2f11aa8 Mon Sep 17 00:00:00 2001
From: Colum Ferry <cferry09@gmail.com>
Date: Mon, 12 Feb 2024 11:59:40 +0000
Subject: [PATCH] feat(react): add tailwind as style prompt option for app gen

---
 .../react/generators/application.json         |  4 +++
 .../packages/react/generators/host.json       |  4 +++
 .../packages/react/generators/remote.json     |  4 +++
 .../bin/create-nx-workspace.ts                |  4 +++
 .../application/application.spec.ts           | 15 +++++++++
 .../src/generators/application/application.ts |  8 +++++
 .../files/base-vite/index.html__tmpl__        |  2 +-
 .../src/app/__fileName__.tsx__tmpl__          | 33 +++++++++++++++++++
 .../files/style-tailwind/src/styles.css       |  1 +
 .../lib/create-application-files.ts           |  8 ++++-
 .../application/lib/normalize-options.ts      |  2 +-
 .../src/generators/application/schema.json    |  4 +++
 .../react/src/generators/host/schema.json     |  4 +++
 .../react/src/generators/remote/schema.json   |  4 +++
 packages/react/src/utils/assertion.ts         |  1 +
 packages/react/typings/style.d.ts             |  1 +
 16 files changed, 96 insertions(+), 3 deletions(-)
 create mode 100644 packages/react/src/generators/application/files/style-tailwind/src/app/__fileName__.tsx__tmpl__
 create mode 100644 packages/react/src/generators/application/files/style-tailwind/src/styles.css

diff --git a/docs/generated/packages/react/generators/application.json b/docs/generated/packages/react/generators/application.json
index b1fcfb1f119eea..c463a55f583f36 100644
--- a/docs/generated/packages/react/generators/application.json
+++ b/docs/generated/packages/react/generators/application.json
@@ -59,6 +59,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/docs/generated/packages/react/generators/host.json b/docs/generated/packages/react/generators/host.json
index 8d72ba1722b0f7..25b635247c422d 100644
--- a/docs/generated/packages/react/generators/host.json
+++ b/docs/generated/packages/react/generators/host.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/docs/generated/packages/react/generators/remote.json b/docs/generated/packages/react/generators/remote.json
index b6d4cded8e6632..eeba3d1dafc957 100644
--- a/docs/generated/packages/react/generators/remote.json
+++ b/docs/generated/packages/react/generators/remote.json
@@ -52,6 +52,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/create-nx-workspace/bin/create-nx-workspace.ts b/packages/create-nx-workspace/bin/create-nx-workspace.ts
index 1906444a6624bc..63ea240fb2a476 100644
--- a/packages/create-nx-workspace/bin/create-nx-workspace.ts
+++ b/packages/create-nx-workspace/bin/create-nx-workspace.ts
@@ -592,6 +592,10 @@ async function determineReactOptions(
             name: 'less',
             message: 'LESS              [ https://lesscss.org     ]',
           },
+          {
+            name: 'tailwind',
+            message: 'tailwind          [ https://tailwindcss.com     ]',
+          },
           {
             name: 'styled-components',
             message:
diff --git a/packages/react/src/generators/application/application.spec.ts b/packages/react/src/generators/application/application.spec.ts
index 92f598e1a70b6d..98c06f2b9205a4 100644
--- a/packages/react/src/generators/application/application.spec.ts
+++ b/packages/react/src/generators/application/application.spec.ts
@@ -341,6 +341,21 @@ describe('app', () => {
     });
   });
 
+  describe('--style tailwind', () => {
+    it('should generate tailwind setup', async () => {
+      await applicationGenerator(appTree, { ...schema, style: 'tailwind' });
+      expect(appTree.exists('my-app/tailwind.config.js')).toEqual(true);
+      expect(appTree.read('my-app/src/styles.css', 'utf-8'))
+        .toMatchInlineSnapshot(`
+        "@tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+        /* You can add global styles to this file, and also import other style files */
+        "
+      `);
+    });
+  });
+
   it('should setup jest with tsx support', async () => {
     await applicationGenerator(appTree, { ...schema, name: 'my-app' });
 
diff --git a/packages/react/src/generators/application/application.ts b/packages/react/src/generators/application/application.ts
index 4b8892870ef3e7..c7d8e6e13ec6ee 100644
--- a/packages/react/src/generators/application/application.ts
+++ b/packages/react/src/generators/application/application.ts
@@ -40,6 +40,7 @@ import {
 } from '@nx/eslint/src/generators/utils/eslint-file';
 import { initGenerator as jsInitGenerator } from '@nx/js';
 import { logShowProjectCommand } from '@nx/devkit/src/utils/log-show-project-command';
+import { setupTailwindGenerator } from '../setup-tailwind/setup-tailwind';
 
 async function addLinting(host: Tree, options: NormalizedSchema) {
   const tasks: GeneratorCallback[] = [];
@@ -133,6 +134,13 @@ export async function applicationGeneratorInternal(
   createApplicationFiles(host, options);
   addProject(host, options);
 
+  if (options.style === 'tailwind') {
+    const twTask = await setupTailwindGenerator(host, {
+      project: options.projectName,
+    });
+    tasks.push(twTask);
+  }
+
   if (options.bundler === 'vite') {
     const { createOrEditViteConfig, viteConfigurationGenerator } =
       ensurePackage<typeof import('@nx/vite')>('@nx/vite', nxVersion);
diff --git a/packages/react/src/generators/application/files/base-vite/index.html__tmpl__ b/packages/react/src/generators/application/files/base-vite/index.html__tmpl__
index 0905c1c939b023..6af82e6a0079cb 100644
--- a/packages/react/src/generators/application/files/base-vite/index.html__tmpl__
+++ b/packages/react/src/generators/application/files/base-vite/index.html__tmpl__
@@ -7,7 +7,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <% if (!styledModule && style !== 'none') { %><link rel="stylesheet" href="/src/styles.<%= style %>" /><% } %>
+    <% if (!styledModule && style !== 'none') { %><link rel="stylesheet" href="/src/styles.<%= style === 'tailwind' ? 'css' : style %>" /><% } %>
   </head>
   <body>
     <div id="root"></div>
diff --git a/packages/react/src/generators/application/files/style-tailwind/src/app/__fileName__.tsx__tmpl__ b/packages/react/src/generators/application/files/style-tailwind/src/app/__fileName__.tsx__tmpl__
new file mode 100644
index 00000000000000..671b49bfca17e0
--- /dev/null
+++ b/packages/react/src/generators/application/files/style-tailwind/src/app/__fileName__.tsx__tmpl__
@@ -0,0 +1,33 @@
+<% if (classComponent) { %>
+import { Component } from 'react';
+<% } if (!minimal) { %>
+import NxWelcome from "./nx-welcome";
+<% } %>
+
+<% if (classComponent) { %>
+export class App extends Component {
+  render() {
+<% } else { %>
+export function App() {
+<% } %>
+  return (
+  <div>
+    <% if (!minimal) { %>
+    <NxWelcome title="<%= projectName %>"/>
+     <% } else { %>
+      <h1>
+        <span> Hello there, </span>
+        Welcome <%= projectName %> 👋
+      </h1>
+     <% } %>
+  </div>);
+<% if (classComponent) { %>
+  }
+}
+<% } else { %>
+}
+<% } %>
+
+export default App;
+
+<% if (inSourceTests === true) { %> <%- inSourceVitestTests %> <% } %>
diff --git a/packages/react/src/generators/application/files/style-tailwind/src/styles.css b/packages/react/src/generators/application/files/style-tailwind/src/styles.css
new file mode 100644
index 00000000000000..90d4ee0072ce3f
--- /dev/null
+++ b/packages/react/src/generators/application/files/style-tailwind/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/packages/react/src/generators/application/lib/create-application-files.ts b/packages/react/src/generators/application/lib/create-application-files.ts
index 91ddf811212f93..972bb3fe7e4d17 100644
--- a/packages/react/src/generators/application/lib/create-application-files.ts
+++ b/packages/react/src/generators/application/lib/create-application-files.ts
@@ -24,6 +24,8 @@ export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
     styleSolutionSpecificAppFiles = '../files/style-styled-module';
   } else if (options.style === 'styled-jsx') {
     styleSolutionSpecificAppFiles = '../files/style-styled-jsx';
+  } else if (options.style === 'tailwind') {
+    styleSolutionSpecificAppFiles = '../files/style-tailwind';
   } else if (options.style === 'none') {
     styleSolutionSpecificAppFiles = '../files/style-none';
   } else if (options.globalCss) {
@@ -185,6 +187,10 @@ function createNxWebpackPluginOptions(
     styles:
       options.styledModule || !options.hasStyles
         ? []
-        : [`./src/styles.${options.style}`],
+        : [
+            `./src/styles.${
+              options.style !== 'tailwind' ? options.style : 'css'
+            }`,
+          ],
   };
 }
diff --git a/packages/react/src/generators/application/lib/normalize-options.ts b/packages/react/src/generators/application/lib/normalize-options.ts
index a159d909b4c275..6596a57d931d79 100644
--- a/packages/react/src/generators/application/lib/normalize-options.ts
+++ b/packages/react/src/generators/application/lib/normalize-options.ts
@@ -46,7 +46,7 @@ export async function normalizeOptions<T extends Schema = Schema>(
 
   const fileName = options.pascalCaseFiles ? 'App' : 'app';
 
-  const styledModule = /^(css|scss|less|none)$/.test(options.style)
+  const styledModule = /^(css|scss|less|tailwind|none)$/.test(options.style)
     ? null
     : options.style;
 
diff --git a/packages/react/src/generators/application/schema.json b/packages/react/src/generators/application/schema.json
index 29c9dde97d74cd..7152a9197ab585 100644
--- a/packages/react/src/generators/application/schema.json
+++ b/packages/react/src/generators/application/schema.json
@@ -62,6 +62,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/host/schema.json b/packages/react/src/generators/host/schema.json
index 4f5e84a1db9d8b..07765493c77a3c 100644
--- a/packages/react/src/generators/host/schema.json
+++ b/packages/react/src/generators/host/schema.json
@@ -49,6 +49,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/remote/schema.json b/packages/react/src/generators/remote/schema.json
index 5e56b6bb2feb47..0252f9ed355c2c 100644
--- a/packages/react/src/generators/remote/schema.json
+++ b/packages/react/src/generators/remote/schema.json
@@ -55,6 +55,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/utils/assertion.ts b/packages/react/src/utils/assertion.ts
index fdeb9b0f9ce5b7..584c23d83ffb5c 100644
--- a/packages/react/src/utils/assertion.ts
+++ b/packages/react/src/utils/assertion.ts
@@ -2,6 +2,7 @@ const VALID_STYLES = [
   'css',
   'scss',
   'less',
+  'tailwind',
   'styled-components',
   '@emotion/styled',
   'styled-jsx',
diff --git a/packages/react/typings/style.d.ts b/packages/react/typings/style.d.ts
index 2197a57542755a..2ee2659578aa5c 100644
--- a/packages/react/typings/style.d.ts
+++ b/packages/react/typings/style.d.ts
@@ -2,6 +2,7 @@ export type SupportedStyles =
   | 'css'
   | 'scss'
   | 'less'
+  | 'tailwind'
   | 'styled-components'
   | '@emotion/styled'
   | 'styled-jsx'