nextjs - 💡(How to fix) Fix [create-next-app]: tailwindcss v4 is installed into devDependencies instead of dependencies in package.json [2 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#93010Fetched 2026-04-20 11:58:25
View on GitHub
Comments
2
Participants
2
Timeline
5
Reactions
1
Timeline (top)
commented ×2closed ×1issue_type_added ×1labeled ×1

Code Example

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 22.21.1
  npm: 10.9.4
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 16.2.4
  eslint-config-next: N/A
  react: 19.2.4
  react-dom: 19.2.4
  typescript: 5.9.3
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/evgeniyworkbel/my-nextjs16-reprod-app

To Reproduce

  1. Run pnpm create next-app@latest my-app from official nextjs docs
  2. Open package.json file
  3. See "@tailwindcss/postcss": "^4" and "tailwindcss": "^4" into devDependencies section

Current vs. Expected behavior

TailwindCSS docs since v4 shows that its packages is installed in dependencies section (they do not use -D flag in commands)

I expect that create-next-app will install tailiwind according to tw docs too

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 22.21.1
  npm: 10.9.4
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 16.2.4
  eslint-config-next: N/A
  react: 19.2.4
  react-dom: 19.2.4
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

create-next-app

Which stage(s) are affected? (Select all that apply)

next build (local), Vercel (Deployed), Other (Deployed)

Additional context

<img width="611" height="731" alt="Image" src="https://github.com/user-attachments/assets/3640cd6d-9b38-4ce6-a6db-2f4578814d4b" /> <img width="1151" height="741" alt="Image" src="https://github.com/user-attachments/assets/4976583d-b358-4fa7-a900-db1da2b099f8" />

extent analysis

TL;DR

The issue can be resolved by installing Tailwind CSS packages in the dependencies section instead of devDependencies.

Guidance

  • Review the package.json file to confirm that "@tailwindcss/postcss" and "tailwindcss" are installed as devDependencies.
  • Check the Tailwind CSS documentation for Next.js to ensure that the installation commands match the expected behavior.
  • Consider manually installing the Tailwind CSS packages in the dependencies section using the command pnpm install tailwindcss@latest @tailwindcss/postcss@latest --save.
  • Verify that the packages are installed correctly by checking the package.json file and running pnpm install to ensure that the dependencies are up-to-date.

Example

No code snippet is provided as the issue is related to package installation and configuration.

Notes

The issue seems to be specific to the create-next-app command and the installation of Tailwind CSS packages. The provided environment information and package versions may be relevant to the issue, but further investigation is needed to determine the root cause.

Recommendation

Apply workaround: manually install the Tailwind CSS packages in the dependencies section using the command pnpm install tailwindcss@latest @tailwindcss/postcss@latest --save, as the create-next-app command may not be installing the packages correctly.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING