v4 alpha does not work on Stackblitz

[jcbhmr]

What version of Tailwind CSS are you using?

4.0.0-alpha.6

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

Vite 5.1.5

What version of Node.js are you using?

v18.18.0

What browser are you using?

Chrome

What operating system are you using?

StackBlitz

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-bhcbjy?file=vite.config.js&terminal=dev

A Tailwind Play link or public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

A reproduction is required when filing an issue — any issue opened without a reproduction will be closed and you'll be asked to create a new issue that includes a reproduction. We're a small team and we can't keep up with the volume of issues we receive if we need to reproduce each issue from scratch ourselves.

Describe your issue

~/projects/vitejs-vite-bhcbjy 3s
❯ npm run dev

> vite-starter@0.0.0 dev
> vite

failed to load config from /home/projects/vitejs-vite-bhcbjy/vite.config.js
error when starting dev server:
Error: Cannot load native addon because loading addons is disabled: /home/projects/vitejs-vite-bhcbjy/node_modules/@tailwindcss/oxide-linux-x64-musl/tailwindcss-oxide.linux-x64-musl.node
    at process.dlopen (https://vitejsvitebhcbjy-emlm.w-credentialless-staticblitz.com/blitz.8e1c3ef8.js:352:49789)
    at Module._extensions..node (https://vitejsvitebhcbjy-emlm.w-credentialless-staticblitz.com/blitz.8e1c3ef8.js:54:15934)
    at Module.load (https://vitejsvitebhcbjy-emlm.w-credentialless-staticblitz.com/blitz.8e1c3ef8.js:54:13457)
    at Module._load (https://vitejsvitebhcbjy-emlm.w-credentialless-staticblitz.com/blitz.8e1c3ef8.js:54:10535)
    at Module.require (https://vitejsvitebhcbjy-emlm.w-credentialless-staticblitz.com/blitz.8e1c3ef8.js:54:13775)
    at i (https://vitejsvitebhcbjy-emlm.w-credentialless-staticblitz.com/blitz.8e1c3ef8.js:98:2198)
    at _0x271448 (https://vitejsvitebhcbjy-emlm.w-credentialless-staticblitz.com/blitz.8e1c3ef8.js:352:193624)
    at Object.eval (file:///home/projects/vitejs-vite-bhcbjy/node_modules/@tailwindcss/oxide/index.js:177:31)
    at Object.function (https://vitejsvitebhcbjy-emlm.w-credentialless-staticblitz.com/blitz.8e1c3ef8.js:352:194402)
    at Module._compile (https://vitejsvitebhcbjy-emlm.w-credentialless-staticblitz.com/blitz.8e1c3ef8.js:54:14871)

[adamwathan]

Just a note for future us, looks like this is because StackBlitz doesn't support loading native modules:

https://developer.stackblitz.com/platform/webcontainers/troubleshooting-webcontainers#cannot-load-native-addon

Not sure if there's anything we can do to make this work, maybe we can compile a WASM version and somehow have that get installed in these environments? Will leave this open to investigate for a bit but might ultimately not be something we can solve.

[devongovett]

For lightning css we have a separate WASM package (lightningcss-wasm), which shims the exact API of the node package. I worked with @d3lm from the stackblitz team to get this automatically aliased in their environment so whenever someone installs lightningcss it actually installs lightningcss-wasm inside stackblitz. In order to reuse the napi code in WASM, I wrote napi-wasm, which shims the napi API in browsers. Here's the source for the wasm package in lightningcss in case it helps.

[d3lm]

Hey 👋 Thanks for pinging me @devongovett 🙏

@adamwathan Indeed, you cannot load native addons in WebContainer because arbitrary native binaries cannot be executed in the browser. Therefore, for this to work it requires a Wasm package. Here's a good example for a setup that I'd suggest: https://github.com/Brooooooklyn/Image/blob/95c248a04fa0b748a280be0d9936be18d744221f/packages/binding/index.js#L338-L355.

Essentially, you need to define another platform-specific dependency that targets wasm32. For that package you have to set the cpu to wasm32 (see this example). This means that if you run npm install locally, it would just install the dependency that matches your local architecture and in WebContainer it would download and install the Wasm package because we are going to roll out a change to WebContainer's architecture and flip it from x64 to wasm32. This is the most ideal setup and something I'd also like to change for lightningcss and parcel-watcher (cc @devongovett).

What we have done for lightningcss is to use a Wasm package that is registered as a "polyfill" on our side which means that when you install lightningcss it will auto-magically install the Wasm package. You can try that out on StackBlitz and inspect node_modules. However, given that we are about to change the architecture for WebContainer, like I said, I'd recommend the former approach now. For the polyfill route to work, it really has to be an exact drop-in replacement and any additional dependencies have to become bundledDependencies as those won't be seen by the package manager.

I'd recommend taking a look at napi-rs or napi-wasm.

Let me know if I can help any further. Happy to collaborate if you need more input or direction. It's important to us to ensure that tailwindcss continues to work in WebContainer.

[RobinMalfait]

Hey!

I think the better solution to use Tailwind CSS in environments like StackBlitz might be to use the CDN directly. This is just an unpkg.com link (or any CDN provider that pulls from npm). Setup: https://tailwindcss.com/docs/installation/play-cdn

For real projects, you should still setup Tailwind CSS properly.

We could still try to setup a wasm build to make this all work, but a solution that works today is the CDN.

Going to close this issue for now since I don't think there is a lot we can/should do, and I think the CDN is a good solution for these environments.

We can re-open this if we really want to push the wasm build though.

[laktek]

A WASM build would also be great for making Tailwind V4 work with Deno compiled binaries (currently, NAPI builds of Oxide doesn't work when included in a Deno-compiled binary)

[diegohaz]

I often use StackBlitz to quickly launch projects directly from GitHub using the Project URL. It would be awesome if Tailwind was supported in this case.

[SeanCassiere]

I often use StackBlitz to quickly launch projects directly from GitHub using the Project URL. It would be awesome if Tailwind was supported in this case.

We'll likely be locking the dependencies to whatever the latest version of Tailwind v3, for our examples in TanStack Router.

This may just be the path for any other OSS maintainers that have examples/sandboxes that are hosted on a stackblitz playground.