tailwindcss-forms: Cannot find module 'tailwindcss/plugin'

for me the only thing that worked is to install manually each plugin via npm (following instructions from plugin githup page):

npm install @tailwindcss/typography

and so on with all the plugin that i needed…

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 😃

  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.

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.

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.

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.

Got same error , but ran npm i and it resolved itself…

I got the error Error: Cannot find module 'tailwindcss/plugin' after adding @tailwindcss/forms to a package in my lerna monorepo.

The problem (what I could figure out; please correct me if this is wrong): @tailwindcss/forms and Tailwindcss plugins, in general, require the plugin.js script from tailwindcss itself. I guess there is a require('tailwindcss/plugin'). In a hoisted monorepo, this fails if the tailwindcss is not installed in the same folder as the plugin (@tailwindcss/forms in my case).

The workaround (what worked for me consistently): in the root package.json, add

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

I had to delete all node_modules (root and from packages) and ran an install. This will ensure that tailwindcss and @tailwindcss/** (plugins) are in the same folder. You can read more about the nohoist here.

Real solution (for tailwindcss maintainers): find a way to import that plugin.js in a hoist-compatible fashion.

@bellcc This problem mostly occurs in a yarn workspaces environment.

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

“devDependencies”: { “@iconify/react”: “^3.0.1”, “autoprefixer”: “^9.8.6”, “postcss”: “^7.0.36”, “tailwindcss”: “npm:@tailwindcss/postcss7-compat@^2.2.7” }

tailwind.config.js:

module.exports = { purge: [],

purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
    screens: {
        xs: '350px',
        sm: '640px',
        md: '768px',
        lg: '1024px',
    },
    extend: {},
},
variants: {
    extend: {},
},
plugins: [],

}

-----> Building on the Heroku-20 stack

-----> Using buildpack: heroku/nodejs

-----> Node.js app detected

-----> Creating runtime environment

   NPM_CONFIG_LOGLEVEL=error

   NODE_VERBOSE=false

   NODE_ENV=production

   NODE_MODULES_CACHE=true

-----> Installing binaries

   engines.node (package.json):  unspecified

   engines.npm (package.json):   unspecified (use default)

   

   Resolving node version 14.x...

   Downloading and installing node 14.18.1...

   Using default npm version: 6.14.15

-----> Restoring cache

   - node_modules

-----> Installing dependencies

   Installing node modules

   

   > nodemon@2.0.12 postinstall /tmp/build_a33bf7e6/node_modules/nodemon

   > node bin/postinstall || exit 0

   

   Love nodemon? You can now support the project via the open collective:

    > https://opencollective.com/nodemon/donate

   

   added 335 packages in 24.474s

-----> Build

   Running heroku-postbuild

   

   > rakeshstore@1.0.0 heroku-postbuild /tmp/build_a33bf7e6

   > NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend

   

   

   > core-js@2.6.12 postinstall /tmp/build_a33bf7e6/frontend/node_modules/babel-runtime/node_modules/core-js

   > node -e "try{require('./postinstall')}catch(e){}"

   

   

   > core-js@3.16.2 postinstall /tmp/build_a33bf7e6/frontend/node_modules/core-js

   > node -e "try{require('./postinstall')}catch(e){}"

   

   

   > core-js-pure@3.16.2 postinstall /tmp/build_a33bf7e6/frontend/node_modules/core-js-pure

   > node -e "try{require('./postinstall')}catch(e){}"

   

   

   > ejs@2.7.4 postinstall /tmp/build_a33bf7e6/frontend/node_modules/ejs

   > node ./postinstall.js

   

   added 2109 packages from 832 contributors in 59.442s

   

   153 packages are looking for funding

     run `npm fund` for details

   

   

   > frontend@0.1.0 build /tmp/build_a33bf7e6/frontend

   > craco build

(node:2968) UnhandledPromiseRejectionWarning: Error: Cannot find module ‘tailwindcss’

Require stack:

• /tmp/build_a33bf7e6/frontend/craco.config.js

• /tmp/build_a33bf7e6/frontend/node_modules/@craco/craco/lib/config.js

• /tmp/build_a33bf7e6/frontend/node_modules/@craco/craco/scripts/build.js

  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)

  at Function.Module._load (internal/modules/cjs/loader.js:746:27)

  at Module.require (internal/modules/cjs/loader.js:974:19)

  at require (internal/modules/cjs/helpers.js:93:18)

  at Object.<anonymous> (/tmp/build_a33bf7e6/frontend/craco.config.js:5:23)

  at Module._compile (internal/modules/cjs/loader.js:1085:14)

  at Object.Module._extensions…js (internal/modules/cjs/loader.js:1114:10)

  at Module.load (internal/modules/cjs/loader.js:950:32)

  at Function.Module._load (internal/modules/cjs/loader.js:790:12)

  at Module.require (internal/modules/cjs/loader.js:974:19)

(Use node --trace-warnings ... to show where the warning was created)

(node:2968) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)

(node:2968) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

-----> Caching build

   - node_modules

-----> Pruning devDependencies

   removed 164 packages and audited 170 packages in 4.224s

   

   3 packages are looking for funding

     run `npm fund` for details

   

   found 1 critical severity vulnerability

     run `npm audit fix` to fix them, or `npm audit` for details

-----> Build succeeded!

-----> Discovering process types

   Procfile declares types -> web

-----> Compressing…

   Done: 92.2M

-----> Launching…

   Released v10

   https://rakeshstore.herokuapp.com/ deployed to Heroku

npm i @tailwindcss/forms and then npm run serve

I was experiencing this same issue but got around it. While I had installed tailwindcss into the project I had not explicitly installed tailwindcss/forms. Follow the instructions in this repo and you’ll be up and running again.

https://github.com/tailwindlabs/tailwindcss-forms

Of course

On Wed, 30 Dec 2020 at 18:02, Adam Wathan notifications@github.com wrote:

Have you installed tailwindcss?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/tailwindlabs/tailwindcss-forms/issues/31#issuecomment-752673021, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEBPZCBFPRFS2FP3NUBVVN3SXNFI7ANCNFSM4VNLTMEQ .

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?

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

npm install tw-elements

npm i @tailwindcss/forms

This fix my issue thank you

Faced the same issue, which got fixed with npm i

Nuking the repo and recloning it worked in my case. It builds fine now.

Hello, have you tried to remove the node_modules and run the npm install again? Thanks.

---

From: Raphaël Saunier @.> Sent: Thursday, March 25, 2021 4:21 PM To: tailwindlabs/tailwindcss-forms @.> Cc: Michael Olonan @.>; Comment @.> Subject: Re: [tailwindlabs/tailwindcss-forms] Cannot find module ‘tailwindcss/plugin’ (#31)

@RobinMalfaithttps://github.com/RobinMalfait sorry to bug you again with this problem, but I’m running into the same issue with both Yarn (1.22.10) and NPM (7.6.3) with or without the nohoist configuration value in a monorepo project (even after deleting all node_modules/ folders):

vite v2.1.2 building for production…

✓ 22 modules transformed.

[vite:css] Cannot find module ‘tailwindcss/plugin’

Require stack:

• @.***/forms/src/index.js

• /PROJECT_DIR/WORKSPACE_DIR/tailwind.config.js

• @.***/jit/src/lib/setupContext.js

• @.***/jit/src/index.js

• /PROJECT_DIR/node_modules/vite/dist/node/chunks/dep-efe32886.js

• /PROJECT_DIR/node_modules/vite/dist/node/cli.js

• /PROJECT_DIR/node_modules/vite/bin/vite.js

file: /PROJECT_DIR/WORKSPACE_DIR/src/styles.css

error during build:

Error: Cannot find module ‘tailwindcss/plugin’

Require stack:

• @.***/forms/src/index.js

• /PROJECT_DIR/WORKSPACE_DIR/tailwind.config.js

• @.***/jit/src/lib/setupContext.js

• @.***/jit/src/index.js

• /PROJECT_DIR/node_modules/vite/dist/node/chunks/dep-efe32886.js

• /PROJECT_DIR/node_modules/vite/dist/node/cli.js

• /PROJECT_DIR/node_modules/vite/bin/vite.js

  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)

  at Function.Module._load (internal/modules/cjs/loader.js:667:27)

  at Module.require (internal/modules/cjs/loader.js:887:19)

  at require (internal/modules/cjs/helpers.js:74:18)

  at Object.<anonymous> @.***/forms/src/index.js:2:16)

  at Module._compile (internal/modules/cjs/loader.js:999:30)

  at Object.Module._extensions…js (internal/modules/cjs/loader.js:1027:10)

  at Module.load (internal/modules/cjs/loader.js:863:32)

  at Function.Module._load (internal/modules/cjs/loader.js:708:14)

  at Module.require (internal/modules/cjs/loader.js:887:19)

As a workaround, I had to install tailwindcss as a dev dependency in the root package.json, but that doesn’t feel right.

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/tailwindlabs/tailwindcss-forms/issues/31#issuecomment-806458398, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ASZ74K4SN7CWJ336R3AZAWTTFLXCNANCNFSM4VNLTMEQ.