feat(react): add tailwind as style prompt option for app gen

nrwl · Feb 12, 2024 · b13ee58 · b13ee58
1 parent dbd0e7b
commit b13ee58
Show file tree

Hide file tree

Showing 16 changed files with 96 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -39,6 +39,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[] = [];
@@ -132,6 +133,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__
@@ -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/...es/react/src/generators/application/files/style-tailwind/src/app/__fileName__.tsx__tmpl__ b/...es/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -2,6 +2,7 @@ export type SupportedStyles =
   | 'css'
   | 'scss'
   | 'less'
+  | 'tailwind'
   | 'styled-components'
   | '@emotion/styled'
   | 'styled-jsx'