From 3ea1a264e96d53f9391c407d8c41a73979461bc9 Mon Sep 17 00:00:00 2001 From: Thatsaphorn Atchariyaphap Date: Fri, 4 Apr 2025 20:50:21 +0200 Subject: [PATCH] (revert) 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 | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/postcss.config.mjs b/postcss.config.mjs index 137bced..1a69fd2 100644 --- a/postcss.config.mjs +++ b/postcss.config.mjs @@ -1,9 +1,8 @@ /** @type {import('postcss-load-config').Config} */ const config = { - plugins: { - '@tailwindcss/postcss': {}, - autoprefixer: {}, - }, + plugins: { + tailwindcss: {}, + }, }; export default config;