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 install 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 `` and trying to open http://localhost:

% npm run dev

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 🤞