Link to the blitz that caused the error

Oct 13, 2025 by wbrum.org 144 views

Introduction

In this article, we will explore the issue of a container not starting with Vite (React) + TailwindCSS 4.x installed. We will go through the steps to reproduce the issue, the expected behavior, and the parity with local. We will also provide a solution to this problem.

Describe the bug

The issue arises when trying to install TailwindCSS 4.x on a React + Vite project template. The application doesn't start, and the output in the terminal shows an error message.

~/sboomi/react-tailwind-template
❯ pnpm install && pnpm run dev
preResolution: Hydrating content-addressable store.
Content-addressable store is at: ~/.local/share/pnpm/store/v3
Progress: total 217, downloaded 217, done

Lockfile is up to date, resolution step is skipped
Packages: +195
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 195, reused 195, downloaded 0, added 195, done

dependencies:
+ @tailwindcss/vite 4.0.12
+ react 19.0.0
+ react-dom 19.0.0
+ tailwindcss 4.0.12

devDependencies:
+ @eslint/js 9.22.0
+ @types/react 19.0.10
+ @types/react-dom 19.0.4
+ @vitejs/plugin-react 4.3.4
+ eslint 9.22.0
+ eslint-plugin-react-hooks 5.2.0
+ eslint-plugin-react-refresh 0.4.19
+ globals 15.15.0
+ typescript 5.7.3
+ typescript-eslint 8.26.0
+ vite 6.2.1

Done in 4.2s

> react-tailwind-template@0.0.0 dev /home/sboomi/react-tailwind-template
> vite

failed to load config from /home/sboomi/react-tailwind-template/vite.config.ts
error when starting dev server:
Error: Cannot load native addon because loading addons is disabled: /home/sboomi/react-tailwind-template/node_modules/.pnpm/@tailwindcss+oxide-linux-x64-musl@4.0.12/node_modules/@tailwindcss/oxide-linux-x64-musl/tailwindcss-oxide.linux-x64-musl.node
    at _0x4dc9e9._0x4ee2d5 [as dlopen] (https://reacttailwindtemplate-eh4z.w-credentialless-staticblitz.com/blitz.495c5120.js:40:914989)
    at Module._extensions..node (https://reacttailwindtemplate-eh4z.w-credentialless-staticblitz.com/builtins.8cb5228f.js:144:15217)
    at Module.load (https://reacttailwindtemplate-eh4z.w-credentialless-staticblitz.com/builtins.8cb5228f.js:144:12820)
    at Module._load (https://reacttailwindtemplate-eh4z.w-credentialless-staticblitz.com/builtins.8cb5228f.js:144:10273)
    at Module.require (https://reacttailwindtemplate-eh4z.w-credentialless-staticblitz.com/builtins.8cb5228f.js:144:13097)
    at require3 (https://reacttailwindtemplate-eh4z.w-credentialless-staticblitz.com/builtins.8cb5228f.js:163:2815)
    at _0x4a53bd (https://reacttailwindtemplate-eh4z.w-credentialless-staticblitz.com/blitz.495c5120.js:40:810748)
    at Object.eval (file:///home/sboomi/react-tailwind-template/node_modules/.pnpm/@tailwindcss+oxide@4.0.12/node_modules/@tailwindcss/oxide/index.js#cjs:177:31)
    at Object._0x339e27 (https://reacttailwindtemplate-eh4z.w-credentialless-staticblitz.com/blitz.495c5120.js:40:811403)
    at Module._compile (https://reacttailwindtemplate-eh4z.w-credentialless-staticblitz.com/builtins.8cb5228f.js:144:14246)
 ELIFECYCLE  Command failed with exit code 1.

~/sboomi/react-tailwind-template main 8s

Link to the blitz that caused the error

https://stackblitz.com/~/github.com/sboomi/react-tailwind-template

Steps to reproduce

Start container
Wait for it to load

Expected behavior

If everything works correctly, you're supposed to see the main page in the browser

Parity with Local

[x] I have run the project in my local machine and I could not reproduce the issue.

Screenshots

No response

Platform

OS: Windows 11
Browser: Google Chrome
Version: 133.0.6943.143

Additional context

No response

Solution

The issue arises from the fact that the @tailwindcss/oxide package is not compatible with the vite version. To fix this issue, we need to update the @tailwindcss/oxide package to a version that is compatible with vite.

Here are the steps to update the @tailwindcss/oxide package:

Run the following command in your terminal:

pnpm install @tailwindcss/oxide@4.0.11

This will update the @tailwindcss/oxide package to version 4.0.11, which is compatible with vite.

Run the following command to install the updated dependencies:

pnpm install

Run the following command to start the development server:

pnpm run dev

This should fix the issue and allow you to start the development server successfully.

Conclusion

Q: What is the issue with Vite (React) + TailwindCSS 4.x installed?

A: The issue arises when trying to install TailwindCSS 4.x on a React + Vite project template. The application doesn't start, and the output in the terminal shows an error message.

Q: What is the error message that I see in the terminal?

A: The error message is:

failed to load config from /home/sboomi/react-tailwind-template/vite.config.ts
error when starting dev server:
Error: Cannot load native addon because loading addons is disabled: /home/sboomi/react-tailwind-template/node_modules/.pnpm/@tailwindcss+oxide-linux-x64-musl@4.0.12/node_modules/@tailwindcss/oxide-linux-x64-musl/tailwindcss-oxide.linux-x64-musl.node
    at _0x4dc9e9._0x4ee2d5 [as dlopen] (https://reacttailwindtemplate-eh4z.w-credentialless-staticblitz.com/blitz.495c5120.js:40:914989)
    at Module._extensions..node (https://reacttailwindtemplate-eh4z.w-credentialless-staticblitz.com/builtins.8cb5228f.js:144:15217)
    at Module.load (https://reacttailwindtemplate-eh4z.w-credentialless-staticblitz.com/builtins.8cb5228f.js:144:12820)
    at Module._load (https://reacttailwindtemplate-eh4z.w-credentialless-staticblitz.com/builtins.8cb5228f.js:144:10273)
    at Module.require (https://reacttailwindtemplate-eh4z.w-credentialless-staticblitz.com/builtins.8cb5228f.js:144:13097)
    at require3 (https://reacttailwindtemplate-eh4z.w-credentialless-staticblitz.com/builtins.8cb5228f.js:163:2815)
    at _0x4a53bd (https://reacttailwindtemplate-eh4z.w-credentialless-staticblitz.com/blitz.495c5120.js:40:810748)
    at Object.eval (file:///home/sboomi/react-tailwind-template/node_modules/.pnpm/@tailwindcss+oxide@4.0.12/node_modules/@tailwindcss/oxide/index.js#cjs:177:31)
    at Object._0x339e27 (https://reacttailwindtemplate-eh4z.w-credentialless-staticblitz.com/blitz.495c5120.js:40:811403)
    at Module._compile (https://reacttailwindtemplate-eh4z.w-credentialless-staticblitz.com/builtins.8cb5228f.js:144:14246)
 ELIFECYCLE  Command failed with exit code 1.

Q: What is the solution to this issue?

A: The solution is to update the @tailwindcss/oxide package to a version that is compatible with vite. You can do this by running the following command in your terminal:

pnpm install @tailwindcss/oxide@4.0.11

Then, run the following command to install the updated dependencies:

pnpm install

Finally, run the following command to start the development server:

pnpm run dev

Q: Why is this issue happening?

A: This issue is happening because the @tailwindcss/oxide package is not compatible with the vite version. The @tailwindcss/oxide package is trying to load a native addon, but the vite version is not allowing it to do so.

Q: How can I prevent this issue from happening in the future?

A: To prevent this issue from happening in the future, you can make sure to check the compatibility of the packages you are using with the version of vite you are using. You can also update the @tailwindcss/oxide package to a version that is compatible with vite before installing it.

Q: What are some other common issues that I may encounter when using Vite (React) + TailwindCSS 4.x installed?

A: Some other common issues that you may encounter when using Vite (React) + TailwindCSS 4.x installed include:

Issues with CSS imports
Issues with JavaScript imports
Issues with package dependencies
Issues with version compatibility

It's always a good idea to check the documentation for Vite and TailwindCSS to see if there are any known issues or compatibility problems that you may encounter.