Something causes problems in the build process

[BlueDragon4251]

`
PS C:\Users\evoly\Documents\Coden\BudgetBuddy> next build ; 5 > $null; start-sleep -milliseconds 150

▲ Next.js 15.2.2

Environments: .env.local

Creating an optimized production build ...

Failed to compile.

./src/app/globals.css.webpack[javascript/auto]!=!../../../AppData/Roaming/npm/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!../../../AppData/Roaming/npm/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/app/globals.css

Error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

at Re (C:\Users\evoly\Documents\Coden\BudgetBuddy\node_modules\tailwindcss\dist\lib.js:33:1889)

at LazyResult.runOnRoot (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\node_modules\postcss\lib\lazy-result.js:329:16)

at LazyResult.runAsync (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\node_modules\postcss\lib\lazy-result.js:258:26)

at LazyResult.async (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\node_modules\postcss\lib\lazy-result.js:160:30)

at LazyResult.then (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\node_modules\postcss\lib\lazy-result.js:404:17)

Import trace for requested module:

./src/app/globals.css.webpack[javascript/auto]!=!../../../AppData/Roaming/npm/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!../../../AppData/Roaming/npm/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/app/globals.css

./src/app/globals.css

./src/app/globals.css

Error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

at Re (C:\Users\evoly\Documents\Coden\BudgetBuddy\node_modules\tailwindcss\dist\lib.js:33:1889)

at LazyResult.runOnRoot (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\node_modules\postcss\lib\lazy-result.js:329:16)

at LazyResult.runAsync (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\node_modules\postcss\lib\lazy-result.js:258:26)

at LazyResult.async (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\node_modules\postcss\lib\lazy-result.js:160:30)

at LazyResult.then (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\node_modules\postcss\lib\lazy-result.js:404:17)

at tryRunOrWebpackError (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\compiled\webpack\bundle5.js:29:316142)

at webpack_require_module (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\compiled\webpack\bundle5.js:29:131548)

at nested_webpack_require_161494 (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\compiled\webpack\bundle5.js:29:130983)

at C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\compiled\webpack\bundle5.js:29:131840

at symbolIterator (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\compiled\neo-async\async.js:1:14444)

at done (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\compiled\neo-async\async.js:1:14824)

at Hook.eval [as callAsync] (eval at create (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\compiled\webpack\bundle5.js:14:9224),

:15:1)

at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\compiled\webpack\bundle5.js:14:6378)

at C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\compiled\webpack\bundle5.js:29:130703

at symbolIterator (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\compiled\neo-async\async.js:1:14402)

-- inner error --

Error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

at Re (C:\Users\evoly\Documents\Coden\BudgetBuddy\node_modules\tailwindcss\dist\lib.js:33:1889)

at LazyResult.runOnRoot (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\node_modules\postcss\lib\lazy-result.js:329:16)

at LazyResult.runAsync (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\node_modules\postcss\lib\lazy-result.js:258:26)

at LazyResult.async (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\node_modules\postcss\lib\lazy-result.js:160:30)

at LazyResult.then (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\node_modules\postcss\lib\lazy-result.js:404:17)

at Object. (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\build\webpack\loaders\css-loader\src\index.js??ruleSet[1].rules[13].oneOf[10].use[2]!C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\build\webpack\loaders\postcss-loader\src\index.js??ruleSet[1].rules[13].oneOf[10].use[3]!C:\Users\evoly\Documents\Coden\BudgetBuddy\src\app\globals.css:1:7)

at C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\compiled\webpack\bundle5.js:29:962742

at Hook.eval [as call] (eval at create (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\compiled\webpack\bundle5.js:14:9002), :7:1)

at Hook.CALL_DELEGATE [as _call] (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\compiled\webpack\bundle5.js:14:6272)

at C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\compiled\webpack\bundle5.js:29:131581

at tryRunOrWebpackError (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\compiled\webpack\bundle5.js:29:316096)

at webpack_require_module (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\compiled\webpack\bundle5.js:29:131548)

at nested_webpack_require_161494 (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\compiled\webpack\bundle5.js:29:130983)

at C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\compiled\webpack\bundle5.js:29:131840

at symbolIterator (C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\compiled\neo-async\async.js:1:14444)

Generated code for C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\build\webpack\loaders\css-loader\src\index.js??ruleSet[1].rules[13].oneOf[10].use[2]!C:\Users\evoly\AppData\Roaming\npm\node_modules\next\dist\build\webpack\loaders\postcss-loader\src\index.js??ruleSet[1].rules[13].oneOf[10].use[3]!C:\Users\evoly\Documents\Coden\BudgetBuddy\src\app\globals.css

Import trace for requested module:

./src/app/globals.css

Build failed because of webpack errors

PS C:\Users\evoly\Documents\Coden\BudgetBuddy>
`

This comes when I run npm run build can sb play help me

[wongjn]

It seems like you are using tailwindcss in a PostCSS plugins configuration instead of @tailwindcss/postcss. See the integration guide for PostCSS for details. Otherwise, please consider providing a git repo that reproduces the unexpected behavior.

[BlueDragon4251]

I'll create a github repo then ask for help if that's ok

[BlueDragon4251]

@wongjn here is the repo and i have a other error beacause now i have migrated to v4 using the npx @tailwindcss/upgrade@next cmd

Error::

PS C:\Users\evoly\Documents\Coden\BudgetBuddy> npm run build ; 11 > $null; start-sleep -milliseconds 150

> build
> next build

  ▲ Next.js 14.2.25
  - Environments: .env.local

   Creating an optimized production build ...
Warning: Your PostCSS configuration defines a field which is not supported (`__esModule`). Please remove this configuration value.
Failed to compile.

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

Error: Your custom PostCSS configuration must export a `plugins` key.
    at getPostCssPlugins (C:\Users\evoly\Documents\Coden\BudgetBuddy\node_modules\next\dist\build\webpack\config\blocks\css\plugins.js:106:15)
    at async C:\Users\evoly\Documents\Coden\BudgetBuddy\node_modules\next\dist\build\webpack\config\blocks\css\index.js:124:36
    at async C:\Users\evoly\Documents\Coden\BudgetBuddy\node_modules\next\dist\build\webpack\loaders\next-font-loader\index.js:86:33
    at async Span.traceAsyncFn (C:\Users\evoly\Documents\Coden\BudgetBuddy\node_modules\next\dist\trace\trace.js:154:20)


> Build failed because of webpack errors

[wongjn]

You haven't provided the repo.

[BlueDragon4251]

I did it myself but thanks anyways