Cannot find module 'tailwindcss/plugin'

[mnk179]

I'm getting this error when building a project with:

{
  "devDependencies": {
    "@tailwindcss/forms": "^0.2.1",
    "tailwindcss": "^2.0.2"
  }
}

tailwind.config.js:

module.exports = {
  plugins: [require("@tailwindcss/forms")],
}

ERROR in ./src/web/css/index.scss
Module build failed (from ../../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Cannot find module 'tailwindcss/plugin'
Require stack:
- PROJECT_DIR/node_modules/@tailwindcss/forms/src/index.js
- PROJECT_DIR/projects/Frontend/tailwind.config.js
- PROJECT_DIR/projects/Frontend/node_modules/tailwindcss/lib/index.js
- PROJECT_DIR/projects/Frontend/postcss.config.js
- PROJECT_DIR/projects/Frontend/node_modules/cosmiconfig/dist/loaders.js
- PROJECT_DIR/projects/Frontend/node_modules/cosmiconfig/dist/ExplorerBase.js
- PROJECT_DIR/projects/Frontend/node_modules/cosmiconfig/dist/Explorer.js
- PROJECT_DIR/projects/Frontend/node_modules/cosmiconfig/dist/index.js
- PROJECT_DIR/projects/Frontend/node_modules/postcss-loader/dist/utils.js
- PROJECT_DIR/projects/Frontend/node_modules/postcss-loader/dist/index.js
- PROJECT_DIR/projects/Frontend/node_modules/postcss-loader/dist/cjs.js
- PROJECT_DIR/node_modules/loader-runner/lib/loadLoader.js
- PROJECT_DIR/node_modules/loader-runner/lib/LoaderRunner.js
- PROJECT_DIR/node_modules/webpack/lib/NormalModule.js
- PROJECT_DIR/node_modules/webpack/lib/LoaderTargetPlugin.js
- PROJECT_DIR/node_modules/html-webpack-plugin/lib/child-compiler.js
- PROJECT_DIR/node_modules/html-webpack-plugin/lib/cached-child-compiler.js
- PROJECT_DIR/node_modules/html-webpack-plugin/index.js
- PROJECT_DIR/projects/Frontend/webpack-configs/webpack-common-config.ts
- PROJECT_DIR/projects/Frontend/webpack.config.ts
- PROJECT_DIR/node_modules/webpack-cli/lib/groups/ConfigGroup.js
- PROJECT_DIR/node_modules/webpack-cli/lib/webpack-cli.js
- PROJECT_DIR/node_modules/webpack-cli/lib/bootstrap.js
- PROJECT_DIR/node_modules/webpack-cli/bin/cli.js
- PROJECT_DIR/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (PROJECT_DIR/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (PROJECT_DIR/node_modules/@tailwindcss/forms/src/index.js:2:16)
    at Module._compile (PROJECT_DIR/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at processResult (PROJECT_DIR/node_modules/webpack/lib/NormalModule.js:582:19)
    at PROJECT_DIR/node_modules/webpack/lib/NormalModule.js:675:5
    at PROJECT_DIR/node_modules/loader-runner/lib/LoaderRunner.js:397:11
    at PROJECT_DIR/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (PROJECT_DIR/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (PROJECT_DIR/projects/Frontend/node_modules/postcss-loader/dist/index.js:103:7)
 @ ./src/web/index.tsx 5:0-26

[EraChanZ01]

npm install tw-elements

[jjavierweb]

I had this issue today, the fix I found was to remove the @tailwindcss/plugin and instead use const plugin = require("tailwindcss/plugin"); This fixed my not found issue

[northrn]

Anyone have an update on a proper fix for this? Nothing here works for me.

[vincepolston]

I was running into this problem. I don't believe it is an issue with TailwindCSS itself, but rather the order of dependencies in your package.json. It appears that node orders the dependencies in alphabetical order.

Meaning even if you npm i tailwindcss and then npm i @tailwindcss/forms in the correct order, node places @tailwindcss/forms before tailwindcss itself.

  "dependencies": {
    "@headlessui/react": "^1.7.7",
    "@heroicons/react": "^2.0.13",
    "@next/font": "13.1.1",
    "@tailwindcss/forms": "^0.5.3", 
    "autoprefixer": "^10.4.13",
    "next": "13.1.1",
    "postcss": "^8.4.20",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "^3.2.4",
  }

My resolution.. manually move @tailwindcss/forms below tailwindcss. It makes sense? In the former order /forms is unable to finish because tailwindcss hasn't been initialized. Didn't test on new code to confirm, but I believe this is the fix.

  "dependencies": {
    "@headlessui/react": "^1.7.7",
    "@heroicons/react": "^2.0.13",
    "@next/font": "13.1.1",
    "autoprefixer": "^10.4.13",
    "next": "13.1.1",
    "postcss": "^8.4.20",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "^3.2.4",
    "@tailwindcss/forms": "^0.5.3"
  }

For clarification we need:

    "tailwindcss": "^3.2.4",
    "@tailwindcss/forms": "^0.5.3"

and not this:

    "@tailwindcss/forms": "^0.5.3"
    "tailwindcss": "^3.2.4",

[relesssar]

I'm beginer with tailwind, I followed by documentation. And had same issue. My fix was: npm install -D @tailwindcss/forms

[ngortheone]

None of the solutions here worked for me. In my case tailwindcss was installed as global package (npm install -g) And it appears that node does not look for requires in global location. The solution was to do this

export NODE_PATH=$(npm root -g)