'CSS Loader Unknown Error after upgrade to tailwind 3 in Next JS 11

I am using Next JS version 11 and Tailwind CSS version 2 in a project. I decided to upgrade Tailwind to version 3 to enjoy all the new features but I am facing some problems. Running npm run dev shows the following error:

error - ./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[3].oneOf[6].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[3].oneOf[6].use[2]!./styles/global.css
Error: UNKNOWN: unknown error, read

I have upgraded my node to version 17 and even updated postcss and autoprefixer to the latest version but the error still persists. What can I do to get rid of this error?

Thank you



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source