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