Update PostCSS plugins configuration to fix an issue

#5 12.48 Failed to compile.
#5 12.48
#5 12.48 ./app/(root)/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/(root)/globals.css
#5 12.48 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.
#5 12.48     at Oe (/app/node_modules/tailwindcss/dist/lib.js:33:1925)
#5 12.48     at LazyResult.runOnRoot (/app/node_modules/next/node_modules/postcss/lib/lazy-result.js:329:16)
#5 12.48     at LazyResult.runAsync (/app/node_modules/next/node_modules/postcss/lib/lazy-result.js:258:26)
#5 12.48     at LazyResult.async (/app/node_modules/next/node_modules/postcss/lib/lazy-result.js:160:30)
#5 12.48     at LazyResult.then (/app/node_modules/next/node_modules/postcss/lib/lazy-result.js:404:17)
#5 12.48
#5 12.48 Import trace for requested module:
#5 12.48 ./app/(root)/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/(root)/globals.css
#5 12.48 ./app/(root)/globals.css

postcss.config.mjs

@@ -1,7 +1,8 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
     plugins: {
-    tailwindcss: {},
+        '@tailwindcss/postcss': {},
+        autoprefixer: {},
     },
 };