fix(react): fix tailwind for react library and component (#29319)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #27954

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

@@ -38,6 +38,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/next/generators/library.json

@@ -40,6 +40,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/component.json

@@ -38,6 +38,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/library.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/next/src/generators/application/application.spec.ts

@@ -433,6 +433,48 @@ describe('app', () => {
     });
   });
 
+  describe('--style tailwind', () => {
+    it('should generate tailwind styles', async () => {
+      await applicationGenerator(tree, {
+        directory: 'myapp',
+        style: 'tailwind',
+      });
+
+      expect(tree.exists(`myapp/src/app/page.module.scss`)).toBeFalsy();
+      expect(tree.exists(`myapp/src/app/global.css`)).toBeTruthy();
+
+      const indexContent = tree.read(`myapp/src/app/page.tsx`, 'utf-8');
+      expect(indexContent).not.toContain(`import styles from './page.module`);
+      expect(indexContent).not.toContain(
+        `import styled from 'styled-components'`
+      );
+      expect(indexContent).toMatchSnapshot();
+
+      expect(tree.read(`myapp/src/app/layout.tsx`, 'utf-8'))
+        .toMatchInlineSnapshot(`
+        "import './global.css';
+
+        export const metadata = {
+          title: 'Welcome to myapp',
+          description: 'Generated by create-nx-workspace',
+        };
+
+        export default function RootLayout({
+          children,
+        }: {
+          children: React.ReactNode;
+        }) {
+          return (
+            <html lang="en">
+              <body>{children}</body>
+            </html>
+          );
+        }
+        "
+      `);
+    });
+  });
+
   it('should setup jest with tsx support', async () => {
     const name = uniq();
 

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

@@ -41,6 +41,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/library/schema.json

@@ -43,6 +43,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/application/__snapshots__/application.spec.ts.snap

@@ -192,6 +192,40 @@ export default defineConfig({
 "
 `;
 
+exports[`app --style scss should generate scss styles 1`] = `
+"// Uncomment this line to use CSS modules
+// import styles from './app.module.scss';
+import NxWelcome from "./nx-welcome";
+
+export function App() {
+  return (
+    <div>
+      <NxWelcome title="my-app"/>
+    </div>
+  );
+}
+
+export default App;
+
+
+"
+`;
+
+exports[`app --style tailwind should not generate any styles files 1`] = `
+"import NxWelcome from './nx-welcome';
+
+export function App() {
+  return (
+    <div>
+      <NxWelcome title="my-app" />
+    </div>
+  );
+}
+
+export default App;
+"
+`;
+
 exports[`app not nested should add vite types to tsconfigs 1`] = `
 "/// <reference types='vitest' />
 import { defineConfig } from 'vite';
@@ -358,6 +392,66 @@ export function App() {
 export default App;
 
 
+"
+`;
+
+exports[`app should generate valid .babelrc JSON config for CSS-in-JS solutions 1`] = `
+"import styled from 'styled-components';
+import NxWelcome from "./nx-welcome";
+
+const StyledApp = styled.div\`
+    // Your style here
+\`;
+
+export function App() {
+  return (
+    <StyledApp>
+      <NxWelcome title="my-app"/>
+    </StyledApp>
+  );
+}
+
+export default App;
+
+"
+`;
+
+exports[`app should generate valid .babelrc JSON config for CSS-in-JS solutions 2`] = `
+"import NxWelcome from "./nx-welcome";
+
+export function App() {
+  return (
+    <div>
+      <style jsx>{\`/** your style here **/\`}</style>
+      <NxWelcome title="my-app"/>
+    </div>
+  );
+}
+
+export default App;
+
+
+"
+`;
+
+exports[`app should generate valid .babelrc JSON config for CSS-in-JS solutions 3`] = `
+"import styled from '@emotion/styled';
+import NxWelcome from "./nx-welcome";
+
+const StyledApp = styled.div\`
+    // Your style here
+\`;
+
+export function App() {
+  return (
+    <StyledApp>
+      <NxWelcome title="my-app"/>
+    </StyledApp>
+  );
+}
+
+export default App;
+
 "
 `;
 

packages/react/src/generators/application/application.spec.ts

@@ -486,13 +486,17 @@ describe('app', () => {
       expect(() => {
         readJson(appTree, `my-app/.babelrc`);
       }).not.toThrow();
+      const content = appTree.read('my-app/src/app/app.tsx').toString();
+      expect(content).toMatchSnapshot();
     }
   );
 
   describe('--style scss', () => {
     it('should generate scss styles', async () => {
       await applicationGenerator(appTree, { ...schema, style: 'scss' });
       expect(appTree.exists('my-app/src/app/app.module.scss')).toEqual(true);
+      const content = appTree.read('my-app/src/app/app.tsx').toString();
+      expect(content).toMatchSnapshot();
     });
   });
 
@@ -509,6 +513,20 @@ describe('app', () => {
         "
       `);
     });
+
+    it('should not generate any styles files', async () => {
+      await applicationGenerator(appTree, { ...schema, style: 'tailwind' });
+
+      expect(appTree.exists('my-app/src/app/app.tsx')).toBeTruthy();
+      expect(appTree.exists('my-app/src/app/app.spec.tsx')).toBeTruthy();
+      expect(appTree.exists('my-app/src/app/app.css')).toBeFalsy();
+      expect(appTree.exists('my-app/src/app/app.scss')).toBeFalsy();
+      expect(appTree.exists('my-app/src/app/app.module.css')).toBeFalsy();
+      expect(appTree.exists('my-app/src/app/app.module.scss')).toBeFalsy();
+
+      const content = appTree.read('my-app/src/app/app.tsx').toString();
+      expect(content).toMatchSnapshot();
+    });
   });
 
   it('should setup jest with tsx support', async () => {

packages/react/src/generators/component/__snapshots__/component.spec.ts.snap

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component --style @emotion/styled should use @emotion/styled as the styled API library 1`] = `
+"import styled from '@emotion/styled';
+
+const StyledHello = styled.div\`
+  color: pink;
+\`;
+export function Hello() {
+  return (
+    <StyledHello>
+      <h1>Welcome to Hello!</h1>
+    </StyledHello>
+  );
+}
+
+export default Hello;
+"
+`;
+
+exports[`component --style none should generate component files without styles 1`] = `
+"export function Hello() {
+  return (
+    <div>
+      <h1>Welcome to Hello!</h1>
+    </div>
+  );
+}
+
+export default Hello;
+"
+`;
+
+exports[`component --style styled-components should use styled-components as the styled API library 1`] = `
+"import styled from 'styled-components';
+
+const StyledHello = styled.div\`
+  color: pink;
+\`;
+export function Hello() {
+  return (
+    <StyledHello>
+      <h1>Welcome to Hello!</h1>
+    </StyledHello>
+  );
+}
+
+export default Hello;
+"
+`;
+
+exports[`component --style styled-jsx should use styled-jsx as the styled API library 1`] = `
+"export function Hello() {
+  return (
+    <div>
+      <style jsx>{\`
+        div {
+          color: pink;
+        }
+      \`}</style>{' '}
+      <h1>Welcome to Hello!</h1>
+    </div>
+  );
+}
+
+export default Hello;
+"
+`;
+
+exports[`component --style tailwind should not generate any style in component 1`] = `
+"export function Hello() {
+  return (
+    <div className={styles['container']}>
+      <h1>Welcome to Hello!</h1>
+    </div>
+  );
+}
+
+export default Hello;
+"
+`;