Can't build on Linux ARM -> cannot find module '@tailwindcss/oxide-linux-arm64-gnu'

[Kaishiyoku]

What version of Tailwind CSS are you using?

4.0.0

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

Vite 6

What version of Node.js are you using?

22.12.0

What browser are you using?

Occurs in CLI

What operating system are you using?

Ubuntu Linux on arm64

Reproduction URL

/

Describe your issue

When running tsc && vite build the build fails and gives the following error:

error during build:
[vite:css] Failed to load PostCSS config (searchPath: [...]): [Error] Loading PostCSS Plugin failed: Cannot find module '@tailwindcss/oxide-linux-arm64-gnu'

[l00sed]

I'm receiving a similar error:

frontend-1  | Error: Cannot find module '@tailwindcss/oxide-linux-arm64-musl'

I'm using the Next.js framework on M3 (arm64) MacOS. I'm not sure if @Kaishiyoku is building from within a Docker container? I'm building inside an Alpine Linux Docker container, so I suspect that the difference in our error message is just Alpine busybox tooling (musl build libraries) vs Ubuntu's (gnu) tooling.

Is it possible that Tailwind hasn't setup something for arm64?

frontend-1  | (node:50) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
frontend-1  | (Use `node --trace-deprecation ...` to show where the warning was created)
frontend-1  | node:internal/process/promises:394
frontend-1  |     triggerUncaughtException(err, true /* fromPromise */);
frontend-1  |     ^
frontend-1  |
frontend-1  | Error: Cannot find module '@tailwindcss/oxide-linux-arm64-musl'
frontend-1  | Require stack:
frontend-1  | - /home/node/node_modules/@tailwindcss/oxide/index.js
frontend-1  | - /home/node/node_modules/@tailwindcss/postcss/dist/index.js
frontend-1  | - /home/node/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
frontend-1  | - /home/node/node_modules/next/dist/build/webpack/config/blocks/css/index.js
frontend-1  | - /home/node/node_modules/next/dist/build/webpack/config/index.js
frontend-1  | - /home/node/node_modules/next/dist/build/webpack-config.js
frontend-1  | - /home/node/node_modules/next/dist/build/webpack-build/impl.js
frontend-1  | - /home/node/node_modules/next/dist/compiled/jest-worker/processChild.js
frontend-1  |     at Function.<anonymous> (node:internal/modules/cjs/loader:1244:15)
frontend-1  |     at /home/node/node_modules/next/dist/server/require-hook.js:55:36
frontend-1  |     at Function._load (node:internal/modules/cjs/loader:1070:27)
frontend-1  |     at TracingChannel.traceSync (node:diagnostics_channel:322:14)
frontend-1  |     at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
frontend-1  |     at Module.<anonymous> (node:internal/modules/cjs/loader:1335:12)
frontend-1  |     at mod.require (/home/node/node_modules/next/dist/server/require-hook.js:65:28)
frontend-1  |     at require (node:internal/modules/helpers:136:16)
frontend-1  |     at Object.<anonymous> (/home/node/node_modules/@tailwindcss/oxide/index.js:206:31)
frontend-1  |     at Module._compile (node:internal/modules/cjs/loader:1562:14) {
frontend-1  |   code: 'MODULE_NOT_FOUND',
frontend-1  |   requireStack: [
frontend-1  |     '/home/node/node_modules/@tailwindcss/oxide/index.js',
frontend-1  |     '/home/node/node_modules/@tailwindcss/postcss/dist/index.js',
frontend-1  |     '/home/node/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js',
frontend-1  |     '/home/node/node_modules/next/dist/build/webpack/config/blocks/css/index.js',
frontend-1  |     '/home/node/node_modules/next/dist/build/webpack/config/index.js',
frontend-1  |     '/home/node/node_modules/next/dist/build/webpack-config.js',
frontend-1  |     '/home/node/node_modules/next/dist/build/webpack-build/impl.js',
frontend-1  |     '/home/node/node_modules/next/dist/compiled/jest-worker/processChild.js'
frontend-1  |   ]
frontend-1  | }
frontend-1  |
frontend-1  | Node.js v22.13.1
frontend-1  | Static worker exited with code: 1 and signal: null

• Next 15.1.6
• Alpine 3.21.2
• Node 22.13.1 (also tried Node 20 w/o success)
• Tailwind 4.0

[l00sed]

Note: I only receive the above error while running Next in production mode (next build && next start). If I run in development mode (next dev --turbo), I get a Turbopack error without much information:

Error: An unexpected Turbopack error occurred. Please see the output of `next dev` for more details.
    at getServerError (https://<my_server>/_next/static/chunks/%5Broot%20of%20the%20server%5D__f81d50._.js:10639:40)
    at https://<my_server>/_next/static/chunks/%5Broot%20of%20the%20server%5D__f81d50._.js:19179:27

Unfortunately, there is no additional output from next dev for me to debug...

EDIT
Ah, actually, if I follow directions more carefully and remove the --turbo flag (just npx next dev), I am once again seeing the same error as build:

Error: Cannot find module '@tailwindcss/oxide-linux-arm64-musl'

[Kaishiyoku]

@l00sed I'm building on an Ampere Altra Max server

[l00sed]

Manually installing @tailwindcss/oxide-linux-arm64-musl and rerunning yields a new error:

frontend-1  | [Error: Cannot find module '../lightningcss.linux-arm64-musl.node'
frontend-1  | Require stack:
frontend-1  | - /home/node/node_modules/lightningcss/node/index.js
frontend-1  | - /home/node/node_modules/@tailwindcss/postcss/dist/index.js
frontend-1  | - /home/node/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
frontend-1  | - /home/node/node_modules/next/dist/build/webpack/config/blocks/css/index.js
frontend-1  | - /home/node/node_modules/next/dist/build/webpack/config/index.js
frontend-1  | - /home/node/node_modules/next/dist/build/webpack-config.js
frontend-1  | - /home/node/node_modules/next/dist/server/dev/hot-reloader-webpack.js
frontend-1  | - /home/node/node_modules/next/dist/server/lib/router-utils/setup-dev-bundler.js
frontend-1  | - /home/node/node_modules/next/dist/server/lib/router-server.js
frontend-1  | - /home/node/node_modules/next/dist/server/lib/start-server.js] {
frontend-1  |   code: 'MODULE_NOT_FOUND',
frontend-1  |   requireStack: [Array]
frontend-1  | }

Then I tried installing lightningcss-linux-arm64-musl

npm i lightningcss-linux-arm64-musl

At this point I finally start to get some compilation error tracebacks, but I really doubt that it's the intention that these packages should have to be manually installed. I suspect there's some issue detecting which version to install and making it happen along with the default npm i tailwindcss.

I'm still continuing to get some odd deprecation warnings...

frontend-1  | Deprecation Warning on line 44, column 8 of file:///home/node/src/styles/globals.scss:44:8:
frontend-1  | Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend-1  |
frontend-1  | More info and automated migrator: https://sass-lang.com/d/import
frontend-1  |
frontend-1  | 44 | @import "tailwindcss";
frontend-1  |
frontend-1  | src/styles/globals.scss 45:9  root stylesheet

and

(node:49) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)

However, I am able to finally get Tailwind v4.0 "working" after these steps.

EDIT
The punycode deprecation warning has nothing to do with Tailwind and appears to stem from ESLint (9.19.x). I discovered by doing npm ls punycode that it is a dependency of another dependency of another dependency used by eslint— uri-js. This package has not been updated in 4 years. Hopefully ESLint can find a way to replace it with something actively maintained.

[wongjn]

I'm still continuing to get some odd deprecation warnings...

frontend-1  | Deprecation Warning on line 44, column 8 of file:///home/node/src/styles/globals.scss:44:8:
frontend-1  | Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend-1  |
frontend-1  | More info and automated migrator: https://sass-lang.com/d/import
frontend-1  |
frontend-1  | 44 | @import "tailwindcss";
frontend-1  |
frontend-1  | src/styles/globals.scss 45:9  root stylesheet

For this, you'd could consider replacing the @import like so:

-@import "tailwindcss";
+@import "tailwindcss/index.css";

The .css ending ensures Sass leaves the @import as-is and ensures Tailwind handles it properly.

[l00sed]

Thanks @wongjn! That did quiet the Sass import deprecation warning.

[mikebywaters]

I experienced the same issue building inside an amd64 docker container. I had to manually pnpm add the @tailwindcss/oxide-linux-x64-gnu and lightningcss-linux-x64-gnu packages to run successfully.

I really doubt that it's the intention that these packages should have to be manually installed

Agreed

[benjivm]

Also seeing this, but on amd64, had to manually add this to my Dockerfile:

npm i lightningcss-linux-x64-gnu @tailwindcss/oxide-linux-x64-gnu sass-embedded-linux-x64

[t-mart]

Saw these errors come up on vercel builds.

Added this to my package.json:

  "optionalDependencies": {
    "@tailwindcss/oxide-linux-x64-gnu": "^4.0.1",
    "lightningcss-linux-x64-gnu": "^1.29.1"
  }

And things worked again.

Edit: I realize that my architecture may be different than OP's, but the technique might be helpful all the same -- just replace the package names appropriately.

[Kaishiyoku]

@t-mart that worked.

I'm using these optional dependencies on ARM now:

"optionalDependencies": {
  "@tailwindcss/oxide-linux-arm64-gnu": "^4.0.1"
},

[philipp-spiess]

Hey folks! Are you all using npm or also some other package managers? I'm asking because there's a known issue right now that platform-specific optional dependencies are not installed right now when doing an npm install with node_modules already present: npm/cli#4828

Some folks have posted workarounds in the lightningcss repo that you could try: parcel-bundler/lightningcss#567.

[l00sed]

Thanks for the update, I am using npm to install dependencies. I'll try the suggestion to remove package-lock.json when I get an opportunity.