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

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            ]"

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            ]"

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            ]"

e2e/react-core/src/react.test.ts

@@ -124,7 +124,6 @@ describe('React Applications', () => {
       });
     }, 500000);
 
-    // TODO(crystal, @jaysoo): Investigate why this is failing.
     it('should be able to use Vite to build and test apps', async () => {
       const appName = uniq('app');
       const libName = uniq('lib');
@@ -307,6 +306,48 @@ describe('React Applications', () => {
           expect(e2eResults).toContain('All specs passed!');
         }
       }, 250_000);
+
+      it('should support tailwind', async () => {
+        const appName = uniq('app');
+        runCLI(
+          `generate @nx/react:app ${appName} --style=tailwind --bundler=vite --no-interactive --skipFormat`
+        );
+
+        // update app to use styled-jsx
+        updateFile(
+          `apps/${appName}/src/app/app.tsx`,
+          `
+       import NxWelcome from './nx-welcome';
+
+        export function App() {
+          return (
+            <div className="w-20 h-20">
+              <NxWelcome title="${appName}" />
+            </div>
+          );
+        }
+
+        export default App;
+
+       `
+        );
+
+        runCLI(`build ${appName}`);
+        const outputAssetFiles = listFiles(`dist/apps/${appName}/assets`);
+        const styleFile = outputAssetFiles.find((filename) =>
+          filename.endsWith('.css')
+        );
+        if (!styleFile) {
+          throw new Error('Could not find bundled css file');
+        }
+        const styleFileContents = readFile(
+          `dist/apps/${appName}/assets/${styleFile}`
+        );
+        const isStyleFileUsingTWClasses =
+          styleFileContents.includes('w-20') &&
+          styleFileContents.includes('h-20');
+        expect(isStyleFileUsingTWClasses).toBeTruthy();
+      }, 250_000);
     });
 
     describe('--format', () => {

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:

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' });
 

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);

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>

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 %> <% } %>

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 */

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'
+            }`,
+          ],
   };
 }

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;
 

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            ]"

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            ]"

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            ]"

packages/react/src/utils/assertion.ts

@@ -2,6 +2,7 @@ const VALID_STYLES = [
   'css',
   'scss',
   'less',
+  'tailwind',
   'styled-components',
   '@emotion/styled',
   'styled-jsx',

packages/react/typings/style.d.ts

@@ -2,6 +2,7 @@ export type SupportedStyles =
   | 'css'
   | 'scss'
   | 'less'
+  | 'tailwind'
   | 'styled-components'
   | '@emotion/styled'
   | 'styled-jsx'