Tailwindcss v4.0 is not working due to lightingcss issues

[Yassinproweb]

Hello good team

I am using tailwindcss v4.0, vite 6.0.11, node v22.12.0 npm v10.9.0 and when I run npm run dev I get this error

Require stack:
- /data/data/com.termux/files/home/Shopiq/node_modules/lightningcss/node/index.js
- /data/data/com.termux/files/home/Shopiq/node_modules/@tailwindcss/postcss/dist/index.js

(@/data/data/com.termux/files/home/Shopiq/postcss.config.mjs)
Error: Loading PostCSS Plugin failed: Cannot find module '../lightningcss.android-arm64.node'
Require stack:
- /data/data/com.termux/files/home/Shopiq/node_modules/lightningcss/node/index.js
- /data/data/com.termux/files/home/Shopiq/node_modules/@tailwindcss/postcss/dist/index.js

(@/data/data/com.termux/files/home/Shopiq/postcss.config.mjs)
    at load (file:///data/data/com.termux/files/home/Shopiq/node_modules/vite/dist/node/chunks/dep-M1IYMR16.js:14805:11)
    at async Promise.all (index 0)
    at async plugins (file:///data/data/com.termux/files/home/Shopiq/node_modules/vite/dist/node/chunks/dep-M1IYMR16.js:14834:12)
    at async processResult (file:///data/data/com.termux/files/home/Shopiq/node_modules/vite/dist/node/chunks/dep-M1IYMR16.js:14905:14)
/data/data/com.termux/files/home/Shopiq/src/style.css

I am using Termux what could be the issue.

Thanks in advance.

[ozipoetra]

It seems lightningcss doesn't provide support for Android yet, maybe for now you could try using proot distro

[ozipoetra]

I just tried through Termux proot-distro in this case I use Alpine Linux and I can confirm that Tailwind 4 can run without error.

[RobinMalfait]

Hey!

Unfortunately we don't support Android right now mainly because Lightning CSS doesn't support it either. If Lightning CSS adds support for it, it might just work on our end as well but for now there is no workaround.

One thing you can do is to use the CDN for development (https://tailwindcss.com/docs/installation/play-cdn) and once you are ready to deploy your application on a Linux box, you can use the normal installation and rely on Lightning CSS.

Another option is to use Tailwind CSS v3 where Lightning CSS isn't used.

[abhishekkumar35]

I am getting same issue in windows: using create-next-app@latest

`D:\codebase\blogcodeabode>pnpm run dev

[email protected] dev D:\codebase\blogcodeabode
next dev

▲ Next.js 15.2.1

• Local: http://localhost:3000
• Network: http://178.168.0.209:3000

✓ Starting...
✓ Ready in 9.5s
○ Compiling /_not-found ...
⨯ ./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css
Error: Cannot find module '../lightningcss.win32-x64-msvc.node'
Require stack:

• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected]\node_modules\lightningcss\node\index.js
• D:\codebase\blogcodeabode\node_modules.pnpm@[email protected]\node_modules@tailwindcss\postcss\dist\index.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\build\webpack\config\blocks\css\plugins.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\build\webpack\config\blocks\css\index.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\build\webpack\config\index.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\build\webpack-config.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\server\dev\hot-reloader-webpack.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\server\lib\router-utils\setup-dev-bundler.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\server\lib\router-server.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\server\lib\start-server.js
  Import trace for requested module:
  ./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css
  ./app/globals.css
  ⨯ ./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css
  Error: Cannot find module '../lightningcss.win32-x64-msvc.node'
  Require stack:
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected]\node_modules\lightningcss\node\index.js
• D:\codebase\blogcodeabode\node_modules.pnpm@[email protected]\node_modules@tailwindcss\postcss\dist\index.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\build\webpack\config\blocks\css\plugins.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\build\webpack\config\blocks\css\index.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\build\webpack\config\index.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\build\webpack-config.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\server\dev\hot-reloader-webpack.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\server\lib\router-utils\setup-dev-bundler.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\server\lib\router-server.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\server\lib\start-server.js
  Import trace for requested module:
  ./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css
  ./app/globals.css
  ⨯ ./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css
  Error: Cannot find module '../lightningcss.win32-x64-msvc.node'
  Require stack:
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected]\node_modules\lightningcss\node\index.js
• D:\codebase\blogcodeabode\node_modules.pnpm@[email protected]\node_modules@tailwindcss\postcss\dist\index.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\build\webpack\config\blocks\css\plugins.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\build\webpack\config\blocks\css\index.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\build\webpack\config\index.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\build\webpack-config.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\server\dev\hot-reloader-webpack.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\server\lib\router-utils\setup-dev-bundler.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\server\lib\router-server.js
• D:\codebase\blogcodeabode\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\server\lib\start-server.js
  Import trace for requested module:
  ./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css
  ./app/globals.css
  GET / 500 in 3793ms`

I tried installing removing lightningcss installing it again, but it is not working. getting same error. even in windows.

Need help.
Thanks in advance

[jainaks01-bh]

ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css

./app/globals.css
GET / 500 in 3793ms`

I tried installing removing lightningcss installing it again, but it is not working. getting same error. even in windows.

Need help. Thanks in advance

should solve parcel-bundler/lightningcss#920 (comment)