New NextJs workspace with tailwind has issues

[sanjeev-chauhan]

Current Behavior

I created new Next.JS workspace using below command.
Issue Description- I chose tailwind but it did not install tailwind and react testing library by default and getting issue to start the app in dev mode. Also observed no scripts added in package.Json by default.

npx create-nx-workspace@latest --preset=next

Expected Behavior

Should have installed tailwind and react testing library by default and the app should be working properly.
Also by default commands should be added for dev/build/test/e2e in package.json

GitHub Repo

No response

Steps to Reproduce

Below are choice i made during create workspace
NX Let's create a new workspace [https://nx.dev/getting-started/intro]

✔ Where would you like to create your workspace? · temp
✔ Application name · temp
✔ Would you like to use the App Router (recommended)? · Yes
✔ Would you like to use the src/ directory? · Yes
✔ Test runner to use for end to end (E2E) tests · cypress
✔ Default stylesheet format · tailwind
✔ Do you want Nx Cloud to make your CI fast? · skip

NX Creating your v18.1.2 workspace.

✔ Installing dependencies with npm
✔ Successfully created the workspace: temp.

Nx Report

Node   : 20.11.1
OS     : darwin-arm64
npm    : 10.2.4

nx (global)        : 18.0.5
nx                 : 18.1.2
@nx/js             : 18.1.2
@nx/jest           : 18.1.2
@nx/linter         : 18.1.2
@nx/eslint         : 18.1.2
@nx/workspace      : 18.1.2
@nx/cypress        : 18.1.2
@nx/devkit         : 18.1.2
@nx/eslint-plugin  : 18.1.2
@nx/next           : 18.1.2
@nx/react          : 18.1.2
@nrwl/tao          : 18.1.2
@nx/web            : 18.1.2
@nx/webpack        : 18.1.2
typescript         : 5.3.3

Failure Logs

⨯ ./src/app/page.tsx:1:0
Module not found: Can't resolve 'tailwind'
> 1 | import styled from 'tailwind';
  2 |
  3 | const StyledPage = styled.div`
  4 |   .page {

Package Manager Version

No response

Operating System

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

Additional Information

No response

[GuiMoraesDev]

Same here
Package manager: PNPM 8.15.5

[GuiMoraesDev]

I notice that's happening in multiple presets
I only have a successful tailwind installation in react standalone

[HDv2b]

Had same issue and sad to find npm i tailwind only made things more complicated

[reoring]

same here on linux

[rtuin]

Remove the styled component relic const StyledPage = styled.div etc. and the <StyledPage> element manually to fix it.

[eyea]

Same here .
There is no release version after the PR has passed 14 hours...

Maybe we should optimize these flow:

1. if the issue can be fixed soon, we should release as soon as possible. we have so many users, after all.
2. if the issue can not be fixed immediately, we should give some idea to help user solve the problem temporary. For example, I created a next app though npx create-nx-workspace@latest --preset=next, an error like:

➜  xx git:(main) pn dev --verbose

> @she/source@0.0.0 dev xxx
> nx dev "--verbose"


 NX   Failed to process project graph. See errors below.

Failed to process project graph.
  The "@nx/jest/plugin" plugin threw an error while creating nodes from jest.config.ts:
    ● Validation Error:

      Module @nx/react/plugins/jest in the transform option was not found.
             <rootDir> is: xxx

      Configuration Documentation:
      https://jestjs.io/docs/configuration

I found the fast solution is give the comment in file jest.config.ts

export default {
  // ...
  transform: {
    // '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
  },
 // ...
};

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.