CODEWITHSUNDEEP
npmwebpacknext.jsnode-modulestailwind-css
mukunda
mukunda

Reputation: 686

Error: Cannot find module 'tailwindcss' (Next.js application)

I recently updated my Node Package Manager in accordance with this post. However, now when I create a new Next.js app and run it using npm run dev, I get the following error:

error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./styles/globals.css
Error: Cannot find module 'tailwindcss'
Require stack:
- E:\Code\testing\node_modules\next\dist\build\webpack\config\blocks\css\plugins.js
- E:\Code\testing\node_modules\next\dist\build\webpack\config\blocks\css\index.js
- E:\Code\testing\node_modules\next\dist\build\webpack\config\index.js
- E:\Code\testing\node_modules\next\dist\build\webpack-config.js
- E:\Code\testing\node_modules\next\dist\server\dev\hot-reloader.js
- E:\Code\testing\node_modules\next\dist\server\dev\next-dev-server.js
- E:\Code\testing\node_modules\next\dist\server\next.js
- E:\Code\testing\node_modules\next\dist\server\lib\start-server.js
- E:\Code\testing\node_modules\next\dist\cli\next-dev.js
- E:\Code\testing\node_modules\next\dist\bin\next
    at Array.map (<anonymous>)

What is causing the error and how do I fix it ? I don't want to build my project using TailwindCSS and hence, do not want to install it.

Edit: I had run the npm install -D tailwindcss@latest postcss@latest autoprefixer@latest command previously to fix the error. It didn't help. I tried uninstalling it and that didn't help either.

Upvotes: 10

Views: 40953

Answers (7)

Saleemullah Khan Saleem
Saleemullah Khan Saleem

Reputation: 1

I experienced the same issue, but it was fixed when I removed the '&' symbol from the project folder name. After that, everything worked smoothly.

Upvotes: 0

Pramod Batagoda
Pramod Batagoda

Reputation: 774

In my case, this issue occurred during production build. By default NPM production mode won't install devDependancies. I had to use the flag --include=dev when running npm install

npm install --include=dev

Upvotes: 2

sundayonah
sundayonah

Reputation: 89

in my own case, i install sudo npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react

Upvotes: -1

Mauricio G&#243;mez
Mauricio G&#243;mez

Reputation: 103

In my case, I was build a multi stage Docker build which had tailwindcss as a devDependecy in the package builder step. The packages were being installed using yarn wokspaces focus --all --production. As the second stage was being build, tailwindcss was missing since as a devDependency and it wasn't being installed and this error did pop up.

Upvotes: 6

maqsood pathan
maqsood pathan

Reputation: 11

install below command

npm install -D tailwindcss postcss autoprefixer

and After install restart the server

Upvotes: 1

mukunda
mukunda

Reputation: 686

This post fixed my error. I had a postcss.config.js file in the parent directory that I hadn't noticed. All my Next.js projects were created in a sub-directory and hence, the oversight.

Upvotes: 7

Venelin
Venelin

Reputation: 677

Remove the node_modules and .next folders and follow the guide here: https://tailwindcss.com/docs/guides/nextjs

Upvotes: 0

Related Questions