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#92995Fetched 2026-04-20 11:58:30
View on GitHub
Comments
2
Participants
2
Timeline
11
Reactions
1
Timeline (top)
commented ×2mentioned ×2renamed ×2subscribed ×2

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 TailwindCSS 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 official TailwindCSS documentation for the recommended installation method, which installs the packages in the dependencies section.
  • Consider running the installation command without the -D flag to install the packages in the dependencies section.
  • Verify that the issue is resolved by checking the package.json file and the behavior of the application.

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 TailwindCSS packages. The provided environment information and images do not seem to be directly related to the issue.

Recommendation

Apply workaround: install TailwindCSS packages in the dependencies section instead of devDependencies, as recommended by the official TailwindCSS documentation. This should resolve the issue and ensure that the packages are installed 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