Fix : Error with lightningcss when using Tailwind CSS v4 with Next.js 15.2.1 and Node.js 20.18.3

[abhishekkumar35]

Getting Error with lightningcss when using Tailwind CSS v4 with Next.js 15.2.1 and Node.js 20.18.3 using create-next-app@latest . --use-pnpm

version of Tailwind CSS

v4.0.12 (via @tailwindcss/postcss)

build tool framework

Next.js 15.2.1 with Turbopack

version of Node.js

v20.18.3

browser

N/A (Build error)

** operating system **

Windows 10

Repo URL
https://github.com/abhishekkumar35/blogcodeabode
also attached terminal messages in a saparate md file name terminalmessage.md(can be found in repo)

1. Create a new Next.js project with Tailwind CSS:

   npx create-next-app@latest blogcodeabode --use-pnpm
   

   (Select Yes for Tailwind CSS, TypeScript, ESLint, App Router, and Turbopack)
2. Run the development server:

   pnpm dev
   

Describe your issue

When running a Next.js 15.2.1 application with Tailwind CSS v4, I'm getting the following error related to lightningcss:

⨯ ./app/globals.css
- 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\.next\build\chunks\[turbopack]_runtime.js
- D:\codebase\blogcodeabode\.next\transform.js
    [at Module._resolveFilename (node:internal/modules/cjs/loader:1225:15)]
    [at Module._load (node:internal/modules/cjs/loader:1051:27)]
    [at Module.require (node:internal/modules/cjs/loader:1311:19)]
    [at require (node:internal/modules/helpers:179:18)]
    [at Object.<anonymous> (D:\codebase\blogcodeabode\node_modules\.pnpm\[email protected]\node_modules\lightningcss\node\index.js:22:22)]
    [at Module._compile (node:internal/modules/cjs/loader:1469:14)]
    [at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)]
    [at Module.load (node:internal/modules/cjs/loader:1288:32)]
    [at Module._load (node:internal/modules/cjs/loader:1104:12)]
    [at Module.require (node:internal/modules/cjs/loader:1311:19)]

The application fails to compile CSS and returns a 500 error. This appears to be an issue with the lightningcss dependency that Tailwind CSS v4 uses.

My package.json dependencies:

{
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "15.2.1"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4",
    "eslint": "^9",
    "eslint-config-next": "15.2.1",
    "@eslint/eslintrc": "^3"
  }
}

the application is expected to compile and run without errors.

[nihal-soni]

i have the same issue

[DevTiyah]

i am facing the exact same issue

[lukasburns]

Same issue here

[lukasburns]

I think this is fixed for Next 15.2.2, just upgraded it and the error disappeared

[nihal-soni]

I think this is fixed for Next 15.2.2, just upgraded it and the error disappeared
I used latest version of next js but its still not working

[philipp-spiess]

Hey @abhishekkumar35: I was checking out your repro and it works fine on my machine. Can you check if this is fixed for you, too?

[mikalPaudel]

i dont know why this error is coming up and i am using node 23.10.0:

failed to load config from D:\blog\my-blog\vite.config.js
error when starting dev server:
Error: Cannot find module '../lightningcss.win32-x64-msvc.node'
Require stack:
- D:\blog\my-blog\node_modules\lightningcss\node\index.js
    at Function._resolveFilename (node:internal/modules/cjs/loader:1405:15)
    at defaultResolveImpl (node:internal/modules/cjs/loader:1061:19)
    at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1066:22)
    at Function._load (node:internal/modules/cjs/loader:1215:37)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
    at Module.require (node:internal/modules/cjs/loader:1491:12)
    at require (node:internal/modules/helpers:135:16)
    at Object.<anonymous> (D:\blog\my-blog\node_modules\lightningcss\node\index.js:22:22)
    at Module._compile (node:internal/modules/cjs/loader:1734:14)