TypeError: Cannot read properties of undefined (reading 'nodes')

[hades200082]

What version of Tailwind CSS are you using?
4.0.0

What build tool (or framework if it abstracts the build tool) are you using?
@tailwindcss/cli

What version of Node.js are you using?
Bun 1.2.x

What browser are you using?
Edge

What operating system are you using?
Windows

Reproduction URL
N/A - error is in the build process and can't be replicated on play

Describe your issue
When running bunx @tailwindcss/cli -i ./Blazor/Blazor/wwwroot/app.css -o ./Blazor/Blazor/wwwroot/app.min.css --watch it intermittently outputs TypeError: Cannot read properties of undefined (reading 'nodes')

[philipp-spiess]

Hey! I tried running bunx @tailwindcss/cli with a generic input file but the issue doesn't occur for me with bun 1.2.4. Can you please set up a reproduction in a GitHub repo so we can take a look? Thank you!

[hades200082]

I'll sort a repro when I'm back at home - travelling the next few days.

I did get it corroborated here though.

It seems to only happen when using the latest version of the CLI via npx/bunx ... if I explicitly specify version 4.0.9 in the npx/bunx command everything works correctly

[desmondinho]

Hey @philipp-spiess,

@hades200082 and I are using the same setup, and I just encountered the same issue.

@import "tailwindcss" theme(static);
@import "../bin/lumexui/theme"; <--- @theme

@source "../../LumexUI.Docs.Client/{Pages,Components}/**/*.{razor,razor.cs}"; <-- works as expected
@source "../bin/lumexui/*.cs"; <--- the problem

For some reason, only the second @source definition is causing the issue here.

Version 4.0.9 is the last working version.

Edit: I'm not sure if glob patterns actually work or if Tailwind simply scans the entire directory. I just copy-pasted this when migrating to v4 and didn't encounter any issues.

[philipp-spiess]

Heya! Friendly reminder that we still don't have a reproduction for this issue that we can run locally which means we can't really investigate the issue.

[LunarN0v4]

Managed to reproduce this issue.

❯ bun run build
$ mkdir -p ./dist/ && vite build && cp -r ./server/* ./dist/ && cp ./vite.config.ts ./dist/vite.config.ts
vite v6.2.5 building for production...
✓ 57 modules transformed.
✗ Build failed in 3.25s
error during build:
[vite:css] [postcss] Cannot read properties of undefined (reading 'nodes')
file: /home/nova/Desktop/Xivi15/client/src/index.css:undefined:NaN
    at H (/home/nova/Desktop/Xivi15/node_modules/tailwindcss/dist/lib.js:5:717)
    at ce (/home/nova/Desktop/Xivi15/node_modules/tailwindcss/dist/lib.js:12:1669)
    at ar (/home/nova/Desktop/Xivi15/node_modules/tailwindcss/dist/lib.js:12:4826)
    at ar.next (<anonymous>)
    at Function.from (<anonymous>)
    at q.factory (/home/nova/Desktop/Xivi15/node_modules/tailwindcss/dist/lib.js:15:21727)
    at q.get (/home/nova/Desktop/Xivi15/node_modules/tailwindcss/dist/lib.js:3:6680)
    at Object.parseCandidate (/home/nova/Desktop/Xivi15/node_modules/tailwindcss/dist/lib.js:15:22252)
    at pe (/home/nova/Desktop/Xivi15/node_modules/tailwindcss/dist/lib.js:15:29258)
    at Object.build (/home/nova/Desktop/Xivi15/node_modules/tailwindcss/dist/lib.js:36:1627)
error: script "build" exited with code 1

Running bun v1.2.8
Link to where issue was reproduced: xiviorg/Xivi15@6174970
Exact file: https://github.com/xiviorg/Xivi15/blob/617497008bef906e7e7b32ab6aa0df7ee0278353/client/src/index.css

I've done this completely on accident, but this issue certainly exists.

[LunarN0v4]

Weird thing I've noticed, no matter how much I try to change the file, it doesn't stop this error.

[LunarN0v4]

Just giving it a file is enough for the error to show up.

[wongjn]

It seems like the error is due to the content of client/public/dodgebrawl.html, namely this string: m-[ouVJ2asXjWX(o.sCmF:F4VqnI).W5/n\.9cP+YWZOkjFH)6?O:=`13BvM3qll_6YJ8e]. It seems like you have some encoded data embedded in some of the HTML files which doesn't play well with Tailwind.

In this case, it is because the aforementioned string matches the syntax for an arbitrary value class. This class name then gets compiled to CSS but is nonsense and ends up tripping up @tailwindcss/postcss.

As a workaround, if none of the files in client/public have any Tailwind classes, you can tell Tailwind to skip them using @source not:

 @tailwind utilities;
+
+@source not "../public";

 @keyframes rainbow {

Or at least exclude any problem file(s):

 @tailwind utilities;
+
+@source not "../public/dodgebrawl.html";

 @keyframes rainbow {

[LunarN0v4]

It seems like the error is due to the content of client/public/dodgebrawl.html, namely this string: m-[ouVJ2asXjWX(o.sCmF:F4VqnI).W5/n\.9cP+YWZOkjFH)6?O:=`13BvM3qll_6YJ8e]. It seems like you have some encoded data embedded in some of the HTML files which doesn't play well with Tailwind.

In this case, it is because the aforementioned string matches the syntax for an arbitrary value class. This class name then gets compiled to CSS but is nonsense and ends up tripping up @tailwindcss/postcss.

As a workaround, if none of the files in client/public have any Tailwind classes, you can tell Tailwind to skip them using @source not:

 @tailwind utilities;
+
+@source not "../public";

 @keyframes rainbow {

Or at least exclude any problem file(s):

 @tailwind utilities;
+
+@source not "../public/dodgebrawl.html";

 @keyframes rainbow {

I see, thank you for answering! :3

[tobihagemann]

I just want to confirm that 4.0.9 is the last working version for me as well. Would be interesting to know what changed with 4.0.10. Unfortunately, I don't know how to reproduce it with a minimal project. I was always under the assumption that I have a fairly standard Next.js project, but who knows. It's weird and driving me crazy, when updating dependencies. 😄

[wongjn]

You could try removing bits of the project incrementally until the error stops showing, then you could posit that the last bit you removed could be involved in producing the error. Otherwise, you could provide the project as a whole and I can see if I can identify the cause.

[tobihagemann]

I think I found my issue. I had a syntax error. 🙈 After fixing it, my issue was gone. Damn it! 😂

- [--btn-border:var(--color-maroon)/90)]
+ [--btn-border:var(--color-maroon)]/90

Sorry for wasting your time. But interesting that this syntax error didn't explode before.