Cannot find module 'tailwindcss' nextjs build

[C0wnuts]

Summary

Hi, I've just created a new project with npx create-next-app@latest command.

I tried deploying in production to see the complete path from development to deployment.

After the creation command, I deleted the node_modules folder to start with a fresh installation of the dependencies for the production deployment (and because I don't want any development dependencies in production), I set my environment variable NODE_ENV=production, I run an npm i, everything goes as expected but as soon as I build with npm run build, I get an error :

Failed to compile.

app\layout.tsx
An error occurred in `next/font`.

Error: Cannot find module 'tailwindcss'
Require stack:
- C:\projects\myapptest\node_modules\next\dist\build\webpack\config\blocks\css\plugins.js
- C:\projects\myapptest\node_modules\next\dist\build\webpack\config\blocks\css\index.js
- C:\projects\myapptest\node_modules\next\dist\build\webpack\config\index.js
- C:\projects\myapptest\node_modules\next\dist\build\webpack-config.js
- C:\projects\myapptest\node_modules\next\dist\build\webpack-build\impl.js
- C:\projects\myapptest\node_modules\next\dist\compiled\jest-worker\processChild.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1143:15)
    at C:\projects\myapptest\node_modules\next\dist\server\require-hook.js:55:36
    at Function.resolve (node:internal/modules/helpers:190:19)
    at loadPlugin (C:\projects\myapptest\node_modules\next\dist\build\webpack\config\blocks\css\plugins.js:49:32)
    at C:\projects\myapptest\node_modules\next\dist\build\webpack\config\blocks\css\plugins.js:157:56
    at Array.map (<anonymous>)
    at getPostCssPlugins (C:\projects\myapptest\node_modules\next\dist\build\webpack\config\blocks\css\plugins.js:157:47)
    at async C:\projects\myapptest\node_modules\next\dist\build\webpack\config\blocks\css\index.js:124:36
    at async C:\projects\myapptest\node_modules\next\dist\build\webpack\loaders\next-font-loader\index.js:86:33
    at async Span.traceAsyncFn (C:\projects\myapptest\node_modules\next\dist\trace\trace.js:154:20)


> Build failed because of webpack errors

So yes, I realize that tailwindcss is in the devDependancies, but I can't find anything about putting it into production without having to install the dev dependancies and therefore having the lightest application possible and reducing the risk of vulnerabilities. If anyone can help me, I've been going round in circles for 2 days without finding a solution ><

I have the original source code (generated by the app creation command) without any modification, so I don't understand why the build can't work.

Additional information

No response

Example

No response

[BorhanSaflo]

A package listed under "dev dependencies" is meant for use during development and building. It's not included in the final build that will be served to the end user, but it's still needed for the build process. In this example, tailwind will be used in the build process to generate the CSS needed for the final build that users will see.

DevDependencies are a special category of npm packages that are only needed during the development phase of your project. Unlike regular dependencies required to run your application in production, devDependencies are used for tasks like testing, building, and local development. They are not included when your project is deployed to a production environment.

source

[C0wnuts]

Thank you ! I didn't understand this detail.

So I keep the NODE_ENV=development during npm im then I switch to NODE_ENV=production for building and everything worked like a charm :)

[aurcode]

For me works the next:

npm i -g pnpm
pnpm install next
npm i -g tailwindcss postcss autoprefixer
pnpm dev