tailwindcss 4.1.18 build issues - Nextjs with @opennext/cloudflare

[mynameistito]

Hey I'm having issues with Tailwind Please find an AI analysis below.

Tailwind CSS v4.1.18 + Next.js 16 Turbopack Build Failure AI Analysis

Error Output 1: Primary RangeError

RangeError: Invalid code point 11025747
    at String.fromCodePoint (<anonymous>)
    [at /home/runner/_work/kzg-servers-connect/kzg-servers-connect/node_modules/tailwindcss/dist/lib.js:1:5550]
    at String.replace (<anonymous>)
    [at Ve (/home/runner/_work/kzg-servers-connect/kzg-servers-connect/node_modules/tailwindcss/dist/lib.js:1:5479)]
    [at mt.markUsedVariable (/home/runner/_work/kzg-servers-connect/kzg-servers-connect/node_modules/tailwindcss/dist/lib.js:1:7717)]
    [at Object.build (/home/runner/_work/kzg-servers-connect/kzg-servers-connect/node_modules/tailwindcss/dist/lib.js:38:1073)]
    [at Object.Once (/home/runner/_work/kzg-servers-connect/kzg-servers-connect/node_modules/@tailwindcss/postcss/dist/index.js:10:5864)]
    [at async LazyResult.runAsync (node_modules/postcss/lib/lazy-result.js:293:11)]
    [at async transform (turbopack:///[turbopack-node]/transforms/postcss.ts:70:34)]
    [at async run (turbopack:///[turbopack-node]/ipc/evaluate.ts:92:23)]

---

Error Output 2: CSS Syntax Error

CssSyntaxError: tailwindcss: /home/runner/_work/kzg-servers-connect/kzg-servers-connect/src/app/globals.css:1:1: Invalid code point 11025747
    at Input.error (node_modules/postcss/lib/input.js:135:16)
    at Root.error (node_modules/postcss/lib/node.js:146:32)
    [at Object.Once (/home/runner/_work/kzg-servers-connect/kzg-servers-connect/node_modules/@tailwindcss/postcss/dist/index.js:10:6911)]
    [at async LazyResult.runAsync (node_modules/postcss/lib/lazy-result.js:293:11)]
    [at async transform (turbopack:///[turbopack-node]/transforms/postcss.ts:70:34)]
    [at async run (turbopack:///[turbopack-node]/ipc/evaluate.ts:92:23)]
Import trace:
  Client Component Browser:
    ./src/app/globals.css [Client Component Browser]
    ./src/app/layout.tsx [Server Component]

---

Error Output 3: Turbopack Build Failure

Error: Turbopack build failed with 1 errors:
./src/app/globals.css
Error evaluating Node.js code
CssSyntaxError: tailwindcss: /home/runner/_work/kzg-servers-connect/kzg-servers-connect/src/app/globals.css:1:1: Invalid code point 11025747
    at Input.error (node_modules/postcss/lib/input.js:135:16)
    at Root.error (node_modules/postcss/lib/node.js:146:32)
    [at Object.Once (/home/runner/_work/kzg-servers-connect/kzg-servers-connect/node_modules/@tailwindcss/postcss/dist/index.js:10:6911)]
    [at async LazyResult.runAsync (node_modules/postcss/lib/lazy-result.js:293:11)]
    [at async transform (turbopack:///[turbopack-node]/transforms/postcss.ts:70:34)]
    [at async run (turbopack:///[turbopack-node]/ipc/evaluate.ts:92:23)]

---

Error Output 4: OpenNext Build Failure

error: script "build:cf" exited with code 1
Error: Command failed: bun run build
 signal: null,
 status: 1,
 output: [ null, null, null ],
    pid: 3870,
 stdout: null,
 stderr: null,
      at genericNodeError (node:child_process:1000:13)
      at checkExecSyncError (node:child_process:458:27)
      at execSync (node:child_process:278:31)
      at buildNextjsApp (/home/runner/_work/kzg-servers-connect/kzg-servers-connect/node_modules/@opennextjs/aws/dist/build/buildNextApp.js:15:8)
      at build (/home/runner/_work/kzg-servers-connect/kzg-servers-connect/node_modules/@opennextjs/cloudflare/dist/cli/build/build.js:47:9)
      at build (/home/runner/_work/kzg-servers-connect/kzg-servers-connect/node_modules/@opennextjs/cloudflare/dist/cli/build/build.js:27:29)
      at buildCommand (/home/runner/_work/kzg-servers-connect/kzg-servers-connect/node_modules/@opennextjs/cloudflare/dist/cli/commands/build.js:21:11)

---

WHERE THE PROBLEM ACTUALLY EXISTS

🎯 Root Cause Location: Tailwind CSS v4.1.18

File: node_modules/tailwindcss/dist/lib.js (minified)
Function: markUsedVariable()
Code Location: Line 7717 in minified code (inside markUsedVariable function)
The Bug Mechanism:
The bug exists in how Tailwind CSS v4.1.18's markUsedVariable() function processes CSS variable names during the build phase. Here's what happens:

1. Invalid Code Point Generation:
   • Tailwind attempts to call: String.fromCodePoint(11025747)
   • This value 11025747 in decimal = 0xA825D3 in hexadecimal
   • Maximum valid Unicode code point: 0x10FFFF (1,114,111 in decimal)
   • The value exceeds valid range by approximately 9,911,636 points
2. When It Fails:
   • The error occurs during CSS variable marking in markUsedVariable()
   • The function uses String.replace() to process variable names
   • Somehow an invalid numeric value is generated instead of a valid code point
   • This happens when Turbopack calls the Tailwind PostCSS plugin
3. Processing Chain:

   src/app/globals.css (input file)
         ↓
   Turbopack PostCSS Transform
   (turbopack:///[turbopack-node]/transforms/postcss.ts:70:34)
         ↓
   @tailwindcss/postcss Plugin Loaded
   (@tailwindcss/postcss/dist/index.js:10:5864)
         ↓
   tailwindcss/dist/lib.js - Object.build()
   (tailwindcss/dist/lib.js:38:1073)
         ↓
   tailwindcss/dist/lib.js - markUsedVariable()
   (tailwindcss/dist/lib.js:1:7717) ← BUG ORIGINATES HERE
         ↓
   String.fromCodePoint(11025747)
   (native JavaScript function)
         ↓
   RangeError: Invalid code point 11025747 ← EXCEPTION THROWN
   

Integration Layer: Turbopack PostCSS Transform

File: turbopack:///[turbopack-node]/transforms/postcss.ts
Function: PostCSS transform handler
Line: 70:34 (in the async transform operation)
Why Turbopack is the Integration Point:

• Turbopack is Next.js 16's default bundler (mandatory, cannot be disabled)
• It includes a PostCSS transform to handle CSS processing
• This transform loads and executes the Tailwind CSS PostCSS plugin
• The plugin receives an invalid code point from somewhere in its processing logic
• Turbopack has no error recovery for this edge case

---

Environments Affected

CI/CD Environment (GitHub Actions - Linux):
- OS: Ubuntu (GitHub Actions runner)
- Node.js: System default (likely v18 or v20)
- Bun: 1.3.4
- Working Directory: /home/runner/_work/kzg-servers-connect/kzg-servers-connect/
- Build Command: bun run build:cf (→ next build via OpenNext)
Local Development (Windows):
- OS: Windows
- Node.js: 25.2.1
- Bun: 1.3.4
- Next.js: 16.0.10 with Turbopack (mandatory)
- Tailwind CSS: 4.1.18 (problem version)
- @tailwindcss/postcss: 4.1.18 (problem version)
Affected Build Tools:
- Next.js: 16.0.10
- Turbopack: Built-in (mandatory in Next.js 16)
- OpenNext: v1.14.8 (Cloudflare adapter)
- PostCSS: v8.5.6

---

Diagnostic Test Results

✗ Test 1: Cache Clearing

Command: rm -rf .next && rm -rf node_modules/.cache && bun cache clean
Result: FAILED - Same exact error occurred
What This Proves: The problem is NOT in:

• Turbopack's build cache
• Node modules cache
• .next directory artifacts
• The issue is in Tailwind's runtime code itself

---

✗ Test 2: CSS File Regeneration

Command: Read original file, rewrite src/app/globals.css with fresh content
Result: FAILED - Same exact error occurred
What This Proves: The problem is NOT:

• In the CSS file content
• In file encoding (file was properly written in UTF-8)
• In the CSS syntax
• The issue is in how Tailwind processes ANY valid CSS file with Turbopack

---

✗ Test 3: Disable Turbopack

Command: Attempted to add experimental.turbopack: false to next.config.ts
Error Received: Unrecognized key(s) in object: 'turbopack' at "experimental"
Result: FAILED - Next.js 16 doesn't support disabling Turbopack
What This Proves:

• Next.js 16 made Turbopack mandatory (no longer optional)
• There is no configuration flag to fall back to SWC
• Cannot bypass the problematic integration layer in Next.js 16
• Would need to downgrade to Next.js 15 to avoid Turbopack entirely

---

✓ Test 4: Downgrade Tailwind CSS (SUCCESSFUL)

Command: bun add --save-dev tailwindcss@4.0.7 @tailwindcss/postcss@4.0.7
Result: SUCCESS - Build completed without errors
Build Time: ~50-60 seconds total
Artifacts Generated: .open-next/worker.js (OpenNext bundle)
What This Proves:

• The bug exists specifically in Tailwind CSS v4.1.18
• Version 4.0.7 does NOT have this bug
• The issue was introduced between v4.0.7 and v4.1.18
• Downgrading is a viable workaround until Tailwind releases a fix

---

Successful Build Output (After Downgrade to 4.0.7)

$ bun run build:cf
Generating config metadata...
✅ Generated metadata file: /home/runner/_work/kzg-servers-connect/kzg-servers-connect/src/lib/servers-config-metadata.ts
   CONFIG_LAST_UPDATED: 2026-01-05T00:34:25.035Z
Building OpenNext Cloudflare bundle...
   ▲ Next.js 16.0.10 (Turbopack)
   - Environments: .env
   - Experiments (use with caution):
     · optimizePackageImports
   Creating an optimized production build ...
 ✓ Compiled successfully in 19.5s
   Running TypeScript ...
   Collecting page data using 3 workers ...
   Generating static pages using 3 workers (0/11) ...
   Generating static pages using 3 workers (2/11) 
   Generating static pages using 3 workers (5/11) 
   Generating static pages using 3 workers (8/11) 
 ✓ Generating static pages using 3 workers (11/11) in 1810.9ms
   Finalizing page optimization ...
Route (app)
┌ ○ /
├ ○ /_not-found
├ ƒ /[serverId]
├ ○ /admin/server-history
├ ƒ /api/v1/admin/server-history
├ ƒ /api/v1/cs2-version
├ ƒ /api/v1/health
├ ƒ /api/v1/server-details
├ ƒ /api/v1/server/[serverId]
├ ƒ /api/v1/servers
├ ƒ /api/v1/servers/[id]/players
├ ƒ /api/v1/servers/config
├ ƒ /api/v1/steam-version
├ ƒ /api/v1/tcp-test
├ ○ /legal
├ ○ /privacy
├ ○ /sitemap.xml
├ ○ /tcp-test
└ ○ /terms
○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand
┌──────────────────────────────┐
│ OpenNext — Generating bundle │
└──────────────────────────────┘
Bundling middleware function...
Bundling static assets...
Bundling cache assets...
Building server function: default...
Applying code patches: 4.641s
⚙️ Bundling the OpenNext server...
Worker saved in `.open-next\worker.js` 🚀
OpenNext build complete.
✅ Build completed successfully!

---

Summary: Where The Problem Lives

Component	Status	Details
Tailwind CSS v4.1.18	🔴 BUG SOURCE	Invalid code point 11025747 generated in markUsedVariable() function
tailwindcss/dist/lib.js:7717	🔴 BUG ORIGIN	String.fromCodePoint() called with invalid Unicode value
@tailwindcss/postcss v4.1.18	🔴 PROPAGATES BUG	Calls the buggy build function from tailwindcss
Turbopack PostCSS Transform	🟡 INTEGRATION POINT	Loads and executes Tailwind plugin, but cannot handle the invalid code point error gracefully
Next.js 16 Turbopack	🟡 MANDATORY LAYER	Cannot be disabled or bypassed; always uses Turbopack for builds
src/app/globals.css	✅ INNOCENT	File is properly formatted; any valid CSS file triggers the bug
CSS File Encoding	✅ NOT GUILTY	UTF-8 encoding is correct; rewriting file doesn't fix it
Build Cache	✅ NOT GUILTY	Clearing cache doesn't resolve the issue

---

[wongjn]

Seems like there might be some file or code in the build environment that is causing the problem. It would seem that Tailwind scans this file causing the invalid code point error. You could try:

• Running a build with DEBUG=* to get a tailwind-*.log file. This file could then show you the files it scans and reveal any weird directories/files it scans.
• Seeing what extra files might exist in the build environment causing the error.
• Use source()/@source syntaxes to only explicitly scan certain files/paths.

Related:

• .hdr files causes invalid codepoint 1234 #18733
• `[plugin:@tailwindcss/vite:generate:serve] Invalid code point 15530851` error after tailwind v3 -> v4 upgrade #18311
• Tailwind COnfig Help #18696
• Build Prob in My Project #18694

[mynameistito]

Hey many thanks, that seemed to have fixed up the issue.

I really appreciate the speedy reply too!

[RobinMalfait]

Do you mind sharing what kind of file / extension caused the issue? Depending on the extension we can ignore these files by default.

[mynameistito]

Hey @RobinMalfait, based on my AI analysis these were the relevant routes that were getting scanned.

The Problem Files/Folders:

Primary Culprit: .cursor/plans/ directory
The debug log (tailwindcss-36804.log) showed Tailwind v4.1.18 was scanning these files:
.cursor/plans/fix_typescript_declaration_file_syntax_errors_61bb9fbd.plan.md
And 40+ other files in the .cursor directory including:

• .cursor/plans/*.plan.md - Cursor AI plan files
• Various other .cursor subdirectories
  Other directories being scanned unnecessarily:
• .agent/ - AI agent files
• .claude/ - Claude AI files
• .opencode/ - OpenCode files
• .github/ - GitHub workflow files
• .vscode/ - VS Code settings
  Root Cause
  One or more of the .cursor/plans/*.plan.md files contained a character sequence that, when processed by Tailwind's markUsedVariable() function, resulted in an invalid Unicode code point (11025747), which exceeds the maximum valid Unicode value (1,114,111 / 0x10FFFF).

The Fix I did was;

I added source(none) to disable automatic scanning, then explicitly registered only the source directories:

@import "tailwindcss" source(none);
@import "tw-animate-css";
@source "../**/*.{js,ts,jsx,tsx,mdx}";

This tells Tailwind v4.1.18 to only scan the necessary directories, entirely ignoring .cursor/, .agent/, and all other non-source directories that contained the problematic characters.

[mauseoluwasegun]

@mynameistito this work for me : npm install tailwindcss@4.0.7 @tailwindcss/postcss@4.0.7 --legacy-peer-deps

[mynameistito]

All sorted ty for the elp!