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.