Generate @nx/react:component with tailwind generates styled-components template

[DanielFroda]

Current Behavior

Generating a component using @nx/react:component and style set to "tailwind", generates a styled-components template. This causes TS errors in the newly generated component.

Code for the generated component:

import styled from 'tailwind';

const StyledTailwindTest = styled.div`
  color: pink;
`;

export function TailwindTest() {
  return (
    < StyledTailwindTest>
        <h1> Welcome to TailwindTest! </ h1>
    </ StyledTailwindTest>
  );
}

export default TailwindTest;

Expected Behavior

Generating a component using @nx/react:component and style set to "tailwind", should generate a "tailwind" component template.

GitHub Repo

No response

Steps to Reproduce

1. Create a new react-monorepo using NX
   

2. Generate a new component using @nx/react:component

3. Generated component has a styled-components template, causes TS errors.

Nx Report

NX   Report complete - copy this into the issue template

Node           : 18.20.0
OS             : darwin-arm64
Native Target  : aarch64-macos
npm            : 10.5.0

nx (global)        : 19.6.5
nx                 : 19.7.3
@nx/js             : 19.7.3
@nx/jest           : 19.7.3
@nx/linter         : 19.7.3
@nx/eslint         : 19.7.3
@nx/workspace      : 19.7.3
@nx/cypress        : 19.7.3
@nx/devkit         : 19.7.3
@nx/eslint-plugin  : 19.7.3
@nx/playwright     : 19.7.3
@nx/react          : 19.7.3
@nrwl/tao          : 19.7.3
@nx/vite           : 19.7.3
@nx/web            : 19.7.3
@nx/webpack        : 19.7.3
typescript         : 5.5.4
---------------------------------------
Registered Plugins:
@nx/webpack/plugin
@nx/eslint/plugin
@nx/playwright/plugin
@nx/jest/plugin

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[DanielFroda]

This is the contents of the nx.json file:

{
  "$schema": "./node_modules/nx/schemas/nx-schema.json",
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "sharedGlobals"],
    "production": [
      "default",
      "!{projectRoot}/.eslintrc.json",
      "!{projectRoot}/eslint.config.js",
      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
      "!{projectRoot}/tsconfig.spec.json",
      "!{projectRoot}/jest.config.[jt]s",
      "!{projectRoot}/src/test-setup.[jt]s",
      "!{projectRoot}/test-setup.[jt]s"
    ],
    "sharedGlobals": []
  },
  "plugins": [
    {
      "plugin": "@nx/webpack/plugin",
      "options": {
        "buildTargetName": "build",
        "serveTargetName": "serve",
        "previewTargetName": "preview"
      }
    },
    {
      "plugin": "@nx/eslint/plugin",
      "options": {
        "targetName": "lint"
      }
    },
    {
      "plugin": "@nx/playwright/plugin",
      "options": {
        "targetName": "e2e"
      }
    },
    {
      "plugin": "@nx/jest/plugin",
      "options": {
        "targetName": "test"
      }
    }
  ],
  "targetDefaults": {
    "e2e-ci--**/*": {
      "dependsOn": ["^build"]
    }
  },
  "generators": {
    "@nx/react": {
      "application": {
        "babel": true,
        "style": "tailwind",
        "linter": "eslint",
        "bundler": "webpack"
      },
      "component": {
        "style": "tailwind"
      },
      "library": {
        "style": "tailwind",
        "linter": "eslint"
      }
    }
  }
}

Setting the component.style to none generates a component more compatible with tailwind.

[white1golf]

had a same issue with library generation command nx g @nx/react:lib on react monorepo preset project with tailwind option selected. adding --style=none explicitly to generation command worked for me. thanks!