Cannot find module 'tailwindcss/plugin' about tailwindcss-forms HOT 56 CLOSED

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...

from tailwindcss-forms.

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 :)

from tailwindcss-forms.

  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.

from tailwindcss-forms.

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.

from tailwindcss-forms.

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.

from tailwindcss-forms.

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.

from tailwindcss-forms.

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.

from tailwindcss-forms.

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

from tailwindcss-forms.

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

from tailwindcss-forms.

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

from tailwindcss-forms.

npm i @tailwindcss/forms and then npm run serve

from tailwindcss-forms.

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

   

   > [email protected] 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

   

   > [email protected] heroku-postbuild /tmp/build_a33bf7e6

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

   

   

   > [email protected] postinstall /tmp/build_a33bf7e6/frontend/node_modules/babel-runtime/node_modules/core-js

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

   

   

   > [email protected] postinstall /tmp/build_a33bf7e6/frontend/node_modules/core-js

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

   

   

   > [email protected] postinstall /tmp/build_a33bf7e6/frontend/node_modules/core-js-pure

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

   

   

   > [email protected] 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

   

   

   > [email protected] 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. (/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

from tailwindcss-forms.

from tailwindcss-forms.

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?

from tailwindcss-forms.

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

from tailwindcss-forms.

from tailwindcss-forms.

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

from tailwindcss-forms.

Faced the same issue, which got fixed with npm i

from tailwindcss-forms.

npm i @tailwindcss/forms

This fix my issue thank you

from tailwindcss-forms.

npm install tw-elements

from tailwindcss-forms.

same here

from tailwindcss-forms.

Have you installed tailwindcss?

from tailwindcss-forms.

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

from tailwindcss-forms.

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

from tailwindcss-forms.

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.

from tailwindcss-forms.

  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.

from tailwindcss-forms.

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

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

from tailwindcss-forms.

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.

from tailwindcss-forms.

@RobinMalfait I don't think #50 fixes it. I removed @latest and installed @internal but the issue persisted. The only solution was using the nohoist option.

from tailwindcss-forms.

@imedadel if you are on NPM 7 it should help, but if the nohoist option works, that's good as well!

from tailwindcss-forms.

I'm using Yarn (the classic one) 😃 I guess a warning in the readme would be great

from tailwindcss-forms.

  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 works for me, Thanks!

from tailwindcss-forms.

Working on codesandbox.io added 'tailwindcss' and 'postcss-flexbugs-fixes' using Dependencies section, after a coffee cup time a browser refresh was suggested with a nice '502 Bad Gateway' when done.

The yarn start tab in Terminal tab, after a
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
and a will-fix-later warning:
warn - React 17.0.1 or newer will be required to leverage all of the upcoming features in Next.js 11.

After that, this:
{ Error: Cannot find module 'tailwindcss'
and was resolved with
$ npm install tailwindcss

But getting a new one:
{ Error: Cannot find module 'postcss-flexbugs-fixes'
this time with a
$ npm install
and then
npm WARN [email protected] requires a peer of postcss@^8.1.13 but none is installed. You must install peer dependencies yourself.

Big sight after, did a
$ npm install postcss-nested postcss
Things restarted and a 'updating Node.js to the latest version' suggestion on codesandbox... ..not on my first day there, want a drink.

$ node -v
v10.23.0
current NVM release will save the day?
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
and after
$ nvm install node
confirmed with:
Now using node v15.12.0 (npm v7.6.3)
adding
$ npm install -g npm
received a first-line warn
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/inherits

End of the road? It's on codesandbox.io and other things to do.

Solved deleting sandbox and started again.

from tailwindcss-forms.

@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:
- /PROJECT_DIR/node_modules/@tailwindcss/forms/src/index.js
- /PROJECT_DIR/WORKSPACE_DIR/tailwind.config.js
- /PROJECT_DIR/WORKSPACE_DIR/node_modules/@tailwindcss/jit/src/lib/setupContext.js
- /PROJECT_DIR/WORKSPACE_DIR/node_modules/@tailwindcss/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:
- /PROJECT_DIR/node_modules/@tailwindcss/forms/src/index.js
- /PROJECT_DIR/WORKSPACE_DIR/tailwind.config.js
- /PROJECT_DIR/WORKSPACE_DIR/node_modules/@tailwindcss/jit/src/lib/setupContext.js
- /PROJECT_DIR/WORKSPACE_DIR/node_modules/@tailwindcss/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> (/PROJECT_DIR/node_modules/@tailwindcss/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.

from tailwindcss-forms.

@MichaelOlonan0075 yes sir! As indicated in my initial message. 😉

from tailwindcss-forms.

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

Could add that I'm using the the same workaround as @MichaelOlonan0075 since clearing node_modules doesn't work for me either. In my case the project is using next.js rather than vite but the setup is a monorepo using yarn workspaces (1.22.10).

from tailwindcss-forms.

I also have this issue and I am using npm, version 7.10.0 & node version 14.15.3

Removing node_modules and running npm i or npm ci doesn't help.

from tailwindcss-forms.

While coming across this error (module not found/could not find declaration) with the TailwindCSS aspect ratio plugin I found this solution that might be of use: #18 (comment)

... I created a file globa.d.ts in the root with the following content

declare module '@tailwindcss/aspect-ratio';

Build works fine now. 😀

from tailwindcss-forms.

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

This is the solution that worked for me immediately

from tailwindcss-forms.

If you faced this error ,(node:6819) unhandledpromiserejectionwarning: error: cannot find module 'tailwindcss'
just install tailwindcss

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

from tailwindcss-forms.

Exactly the same as above

from tailwindcss-forms.

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

have you fixed it? (https://www.youtube.com/watch?v=YQLw5kJ1yrQ) < i fixed it with this video

from tailwindcss-forms.

from tailwindcss-forms.

Installing what it can't find manually worked for me

npm install tailwindcss/plugin

from tailwindcss-forms.

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

i fixed this issue by adding below npm pkg
npm i @tailwindcss/forms

from tailwindcss-forms.

Had the same issue while using with turborepo . adding as as dev dependency fixes it

from tailwindcss-forms.

Had the same issue while using with turborepo . adding as as dev dependency fixes it

Yeah, for those struggling with turborepo & tailwind, check out this video: https://www.youtube.com/watch?v=YQLw5kJ1yrQ

from tailwindcss-forms.

Install the plugin from npm : npm install -D @tailwindcss/forms

from tailwindcss-forms.

This solution worked for me:
After installing @tailwindcss/forms through npm and adding the @tailwindcss/forms plugin in tailwing.config.js file, I shut down and then restarted my development server (npm run dev). The issue was resolved. Looks like we have to restart the server every time we do a change to tailwind.config.js file.

from tailwindcss-forms.

just delete "@tailwindcss/forms" line from devDependencies and move to dependencies.
that's worked for me

from tailwindcss-forms.

I fixed this problem by >developer reload window in vs code, and then run dev vite

from tailwindcss-forms.

My issue was I forgot to install npm through sail. and run npm run dev or watch through sail.

from tailwindcss-forms.

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

from tailwindcss-forms.

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

from tailwindcss-forms.

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",

from tailwindcss-forms.

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)

from tailwindcss-forms.