On OpenBSD/adJ 7.6 tailwindcss 4 produces "Unsupported OS: openbsd, architecture: x64"

[vtamara]

What version of Tailwind CSS are you using?

v4.0.17

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

vite 6.2.0

What version of Node.js are you using?

v20.18.2

What browser are you using?

Chromium 128.0.6613.137

What operating system are you using?

OpenBSD/adJ 7.6

Reproduction URL

https://github.com/vtamara/minvt4

Cloning and running

% npm install
% npm run dev

will present the problem on OpenBSD/adJ 7.6.

Describe your issue

The steps to reproduce the problem from scratch on an OpenBSD/adJ 7.6 are:

% npm create vite@latest minvt4 -- --template react
% cd minvt4

Editing package.json to add:

  "overrides": {
    "rollup": "npm:@rollup/wasm-node"
  }

Then starting the development server with

% npm install
% npm run dev

And opening in a browser http://localhost:5173/ will work:

After we stop the server and add tailwindcss by following the instructions of https://tailwindcss.com/docs/installation/using-vite

% npm add tailwindcss @tailwindcss/vite

Then we edit vite.config.js to make it:

import { defineConfig } from 'vite'                                                                                                                             
import react from '@vitejs/plugin-react'                                                                                                                        
import tailwindcss from '@tailwindcss/vite'                                                                                                                     
                                                                                                                                                                
export default defineConfig({                                                                                                                                   
  plugins: [                                                                                                                                                    
    react(),                                                                                                                                                    
    tailwindcss(),                                                                                                                                              
  ],                                                                                                                                                            
})       

Then we add at the beginning of src/index.css:

@import "tailwindcss";

And finally running with npm run dev and trying to open http://localhost will produce the error:

failed to load config from /home/vtamara/comp/tailwindcss/minv/vite.config.js
error when starting dev server:
Error: Unsupported OS: openbsd, architecture: x64
    at Object.<anonymous> (/home/vtamara/comp/tailwindcss/minv/node_modules/@tailwindcss/oxide/index.js:303:11)
    at Module._compile (node:internal/modules/cjs/loader:1469:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
...

We experienced the same problem with tailwindcss v4 in a new project with next.js, we wrote the steps to reproduce it at https://github.com/vtamara/tailwindcss/wiki/Problem-with-tailwind-4-on-adJ-OpenBSD

There we also described a workaround by downgrading to tailwindcss v3.

[philipp-spiess]

Hey! Tailwind CSS v3 depends on native module extensions (specifically Oxide but also lightningcss and @parcel/watcher which are third-party dependencies). We don't have an OpenBSD build at the moment but even if we had one, there would not be one for lightningcss / @parcel/watcher. I'm not super familiar with OpenBSD but I wonder how other npm packages behave that have native extensions?

[vtamara]

Hey! Tailwind CSS v3 depends on native module extensions (specifically Oxide but also lightningcss and @parcel/watcher which are third-party dependencies). We don't have an OpenBSD build at the moment but even if we had one, there would not be one for lightningcss / @parcel/watcher. I'm not super familiar with OpenBSD but I wonder how other npm packages behave that have native extensions?

Thanks for answering. Some projects are implementing solution in WebAssembly for platorms whose binaries they don't support. For example rollup and next.js.

In the case of rollup in the projects that use it I have to add manually in the package.json:

  "overrides": {                                                                                                                                                
    "rollup": "npm:@rollup/wasm-node"                                                                                                                           
  } 

In the case of next.js on runtime it chooses the right tools:

In https://nextjs.org/docs/architecture/nextjs-compiler I read

WebAssembly: Rust's support for WASM is essential for supporting all possible platforms and taking Next.js development everywhere.

[vtamara]

I opened issues for:

• lightningcss: Support for OpenBSD/adJ parcel-bundler/lightningcss#950
• @parcel/watcher: Support for OpenBSD/adJ parcel-bundler/watcher#203

[philipp-spiess]

Hey! We're shipping an experimental WASM build soon (should be in the next insiders) that can be used as a drop-in replacement for @tailwindcss/oxide: See #17558

That also exists for @parcel/watcher and lightningcss.

So maybe this will work:

"overrides": {
  "@parcel/watcher": "npm:@parcel/watcher-wasm",
  "lightningcss": "npm:lightningcss-wasm",
  "@tailwindcss/oxide": "npm:@tailwindcss/oxide-wasm32-wasi",
}

Would be awesome if you can test this once the release is out 🤞

[philipp-spiess]

@vtamara Any chance you were able to test this approach? :)

[vtamara]

@vtamara Any chance you were able to test this approach? :)

@philipp-spiess I started a new project as I described originally, before running npm install I changed package.json to add the overrides you described. After npm install my package-lock.json includes:

• tailwindcss 4.1.4
• lightningcss 1.29.2
• @tailwindcss/oxide 4.1.4

However running npm run dev will produce:

 % npm run dev                                                                                                                                   [10/2600]
                                                                                                                                                                
> [email protected] dev                                                              
> vite                                                                          
                                                                                
failed to load config from /home/vtamara/comp/js/minvt5/vite.config.js
error when starting dev server:                                                 
Error: Cannot find module '../lightningcss.openbsd-x64.node'                                                                                                    
Require stack:                                                                  
- /home/vtamara/comp/js/minvt5/node_modules/lightningcss/node/index.js
    at Function._resolveFilename (node:internal/modules/cjs/loader:1225:15)

[philipp-spiess]

Hmm seems like the overrides don't work as expected, lightningcss is still trying to load a .node binary. I'm not 100% sure if you can even override one package with another one in npm when I read this: https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides

We're using pnpm for the Tailwind CSS monorepo where I know this type of overwriting does work, so perhaps you could try that instead just so we got the override working?

{ 
"pnpm": {
    "overrides": {
      "@parcel/watcher": "npm:@parcel/watcher-wasm",
      "lightningcss": "npm:lightningcss-wasm",
      "@tailwindcss/oxide": "npm:@tailwindcss/oxide-wasm32-wasi"
    }
  }
} 

[vtamara]

In the same project I did before:

1. I deleted node_modules and package-lock.json
2. Updated package.json as you proposed, althoug I had to add also rollup:

   "pnpm": {                                                                                                                                                     
     "overrides": {                                                                                                                                              
       "rollup": "npm:@rollup/wasm-node",                                                                                                                        
       "@parcel/watcher": "npm:@parcel/watcher-wasm",                                                                                                            
       "lightningcss": "npm:lightningcss-wasm",                                                                                                                  
       "@tailwindcss/oxide": "npm:@tailwindcss/oxide-wasm32-wasi"                                                                                                
     }                                                                                                                                                           
   }

3. Updated pnpm with doas npm i --force -g pnpm
4. Installed packages with pnpm i
5. Run with pnpm run dev and it worked
6. To src/App.css added @import "tailwindcss";run again and it worked
7. In src/App.jsx I changed <h1>Vite + React</h1> for <h1 class="text-3xl font-bold underline">Vite + React + TailwindCSS</h1>, run again and it worked

Thanks a lot. I will close this and the other issues.

[philipp-spiess]

This is awesome! Thanks for testing!