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

[ItayElgazar]

same here

[adamwathan]

Have you installed tailwindcss?

[ItayElgazar]

Of course

…

On Wed, 30 Dec 2020 at 18:02, Adam Wathan ***@***.***> wrote: Have you installed tailwindcss? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#31 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEBPZCBFPRFS2FP3NUBVVN3SXNFI7ANCNFSM4VNLTMEQ> .

[adamwathan]

Can you provide a GitHub repo that reproduces the issue? I can't reproduce this problem in a brand new project.

[mnk179]

I tried to replicate the issue here but wasn't able to: https://github.com/mnk179/tailwind-forms

However, it seems to me that this has something to do with dependency resolution in my monorepo setup. I added:

"workspaces": {
        "nohoist": [
            "@tailwindcss/forms",
            "@tailwindcss/forms/**"
        ]
    },

to my package.json and that seems to have solved the issue.

[kamsar]

Ran into this, also in yarn workspaces-based monorepo. The nohoist solution seemed to work for me.

I did notice that it looked like tailwindcss was not hoisted (project1/node_modules/tailwindcss), but @tailwindcss/forms seemed to be (node_modules/@tailwindcss/forms). Perhaps @tailwindcss/forms was attempting to require something from a module that was not present at the root?

[AbreezaSaleem]

I'm getting the same issue. Its a basic cra and I followed the instructions from the tailwindcss documentation to set tailwind up.

Here is my repo: https://github.com/AbreezaSaleem/surveys

[Sjoerd]

Same issue here, on Windows (development) it works fine, but on my production server (Ubuntu 20 with same NodeJS version as my Windows PC) I got this error.

[papageno]

  plugins: [
    require("@tailwindcss/aspect-ratio"),
    require("@tailwindcss/typography"),
  ],

Same issue with other @tailwindcss plugins too.

I am on a monorepo set up with yarn workspace.

[yassinebridi]

"workspaces": {
  "nohoist": [
    "@tailwindcss/forms",
    "@tailwindcss/forms/**"
  ]
},

I'm in a yarn workspaces setup too, this solution doesn't seem to work for me.

[papageno]

  plugins: [
    require("@tailwindcss/aspect-ratio"),
    require("@tailwindcss/typography"),
  ],

Same issue with other @tailwindcss plugins too.

I am on a monorepo set up with yarn workspace.

I deleted all "node_modules" folders and re-installed all dependencies, and all plugins worked properly!

Maybe it is not a Tailwind CSS plugin issue.

[botv]

For anyone having this issue using Yarn workspaces, run this command in your project root:

yarn add -W tailwindcss@latest postcss@latest autoprefixer@latest

This will make the modules accessible to tailwind.config.js in all of the workspaces. In the future, it would be nice if the config file would automatically detect that you're in a workspace and look for tailwindcss/plugins in the adjacent node_modules directory, but this is a good quick fix :)

[mathieutu]

The same here with a yarn workspace too.

I think this is a regression with Tailwind 2. I have other workspaces with tw1 which work properly.

[fated-x]

This seemed to work locally for me but not in Production. Kind of silly, but the reason this was happening was: I had my tailwindcss plugin installed as a dev dependency in package.json. Since I don't install dev dependencies in Production, running npm run build failed every time. Once I added my plugin as a main dependency, the build worked as expected.

[travishorn]

I was getting this same error when using Tailwind CSS in a Nuxt.js app.

There were no issues on my development PC where the app was set up using create-nuxt app, however, I'd get Error: Cannot find module 'tailwindcss/plugin' when trying to run npm run generate on my production service (Netlify).

The solution was to manually install Tailwind CSS: npm i -D tailwindcss

Note that create-nuxt-app does define @nuxtjs/tailwindcss as a dev dependency, but that's not enough when actually generating/building the site on a machine that you didn't set up using create-nuxt-app.