pnpx tailwindcss init -p Cannot find module gen-mapping.umd.js

[SolomonLeon]

What version of Tailwind CSS are you using?

devDependencies:
+ autoprefixer 10.4.20
+ postcss 8.4.49
+ tailwindcss 3.4.16

What build tool (or framework if it abstracts the build tool) are you using?

dependencies:
+ react 18.3.1 (19.0.0 is available)
+ react-dom 18.3.1 (19.0.0 is available)

devDependencies:
+ @eslint/js 9.16.0
+ @types/react 18.3.14 (19.0.1 is available)
+ @types/react-dom 18.3.3 (19.0.2 is available)
+ @vitejs/plugin-react 4.3.4
+ eslint 9.16.0
+ eslint-plugin-react-hooks 5.1.0
+ eslint-plugin-react-refresh 0.4.16
+ globals 15.13.0
+ typescript 5.6.3 (5.7.2 is available)
+ typescript-eslint 8.18.0
+ vite 6.0.3

What version of Node.js are you using?

v20.17.0

What browser are you using?

N/A

What operating system are you using?

Windows

Describe your issue

I was following the guidance in the Install Tailwind CSS with Vite guide to create a React TypeScript project using pnpm. However, when I ran the second step npx tailwindcss init -p, the CLI reported the following error.

> pnpx tailwindcss init -p
node:internal/modules/cjs/loader:641
      throw e;
      ^

Error: Cannot find module 'C:\Users\xxx\AppData\Local\pnpm-cache\dlx\4rg7jemirruotlw3nojgw7yowy\193afa628f4-30b8\node_modules\.pnpm\[email protected]\node_modules\@jridgewell\gen-mapping\dist\gen-mapping.umd.js'
    at createEsmNotFoundErr (node:internal/modules/cjs/loader:1262:15)
    at finalizeEsmResolution (node:internal/modules/cjs/loader:1250:15)
    at resolveExports (node:internal/modules/cjs/loader:634:14)
    at Module._findPath (node:internal/modules/cjs/loader:724:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1211:27)
    at Module._load (node:internal/modules/cjs/loader:1051:27)
    at Module.require (node:internal/modules/cjs/loader:1311:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (C:\Users\xxx\AppData\Local\pnpm-cache\dlx\4rg7jemirruotlw3nojgw7yowy\193afa628f4-30b8\node_modules\.pnpm\s[email protected]\node_modules\sucrase\dist\computeSourceMap.js:1:92)
    at Module._compile (node:internal/modules/cjs/loader:1469:14) {
  code: 'MODULE_NOT_FOUND',
  path: 'C:\\Users\\xxx\\AppData\\Local\\pnpm-cache\\dlx\\4rg7jemirruotlw3nojgw7yowy\\193afa628f4-30b8\\node_modules\\.pnpm\\[email protected]\\node_modules\\@jridgewell\\gen-mapping\\package.json'
}

Node.js v20.17.0

[RobinMalfait]

Hey!

This looks like it's coming from pnpx and not Tailwind CSS itself (nothing in the stacktrace points to tailwindcss). My assumption is that you will run into this issue with other setups as well if you use pnpx.

I would suggest to try with npx instead.

If you want to use pnpx, I would recommend to clear your pnpm-cache using pnpm store prune (https://pnpm.io/cli/store#prune) and see if that helps.

[akoskm]

I think this was incorrectly marked as an answer. I'm using npm, tailwind 3.4.16, and running into the same error.

The problem originates from @jridgewell/gen-mapping, and the error is documented here: jridgewell/gen-mapping#18

The broken version of this package is used by sucrase that is a dependency in tailwind 3.x.

However, I'm unsure if it's worth waiting for that package to make a release since some earlier PRs are still waiting for review&merge: alangpierce/sucrase#836

Update: the broken version has been unpublished jridgewell/gen-mapping#14 (comment)

What worked for me was removing the package-lock.json and running npm i.

[matagaralph]

What version of Tailwind CSS are you using?

devDependencies:
+ autoprefixer 10.4.20
+ postcss 8.4.49
+ tailwindcss 3.4.16

What build tool (or framework if it abstracts the build tool) are you using?

dependencies:
+ react 18.3.1 (19.0.0 is available)
+ react-dom 18.3.1 (19.0.0 is available)

devDependencies:
+ @eslint/js 9.16.0
+ @types/react 18.3.14 (19.0.1 is available)
+ @types/react-dom 18.3.3 (19.0.2 is available)
+ @vitejs/plugin-react 4.3.4
+ eslint 9.16.0
+ eslint-plugin-react-hooks 5.1.0
+ eslint-plugin-react-refresh 0.4.16
+ globals 15.13.0
+ typescript 5.6.3 (5.7.2 is available)
+ typescript-eslint 8.18.0
+ vite 6.0.3

What version of Node.js are you using?

v20.17.0

What browser are you using?

N/A

What operating system are you using?

Windows

Describe your issue

I was following the guidance in the Install Tailwind CSS with Vite guide to create a React TypeScript project using pnpm. However, when I ran the second step npx tailwindcss init -p, the CLI reported the following error.

> pnpx tailwindcss init -p
node:internal/modules/cjs/loader:641
      throw e;
      ^

Error: Cannot find module 'C:\Users\xxx\AppData\Local\pnpm-cache\dlx\4rg7jemirruotlw3nojgw7yowy\193afa628f4-30b8\node_modules\.pnpm\[email protected]\node_modules\@jridgewell\gen-mapping\dist\gen-mapping.umd.js'
    at createEsmNotFoundErr (node:internal/modules/cjs/loader:1262:15)
    at finalizeEsmResolution (node:internal/modules/cjs/loader:1250:15)
    at resolveExports (node:internal/modules/cjs/loader:634:14)
    at Module._findPath (node:internal/modules/cjs/loader:724:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1211:27)
    at Module._load (node:internal/modules/cjs/loader:1051:27)
    at Module.require (node:internal/modules/cjs/loader:1311:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (C:\Users\xxx\AppData\Local\pnpm-cache\dlx\4rg7jemirruotlw3nojgw7yowy\193afa628f4-30b8\node_modules\.pnpm\s[email protected]\node_modules\sucrase\dist\computeSourceMap.js:1:92)
    at Module._compile (node:internal/modules/cjs/loader:1469:14) {
  code: 'MODULE_NOT_FOUND',
  path: 'C:\\Users\\xxx\\AppData\\Local\\pnpm-cache\\dlx\\4rg7jemirruotlw3nojgw7yowy\\193afa628f4-30b8\\node_modules\\.pnpm\\[email protected]\\node_modules\\@jridgewell\\gen-mapping\\package.json'
}

Node.js v20.17.0

If you're using pnpm use the command pnpm dlx tailwindcss init -p that is equivalent to npx tailwindcss init -p.