Bug: Detecting classes in source files causes crash

[Autumnal-Joy]

What version of Tailwind CSS are you using?

4.0.11

What build tool (or framework if it abstracts the build tool) are you using?

"next": "15.2.2-canary.3"

What version of Node.js are you using?

v20.18.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

https://github.com/Autumnal-Joy/tailwindcss-bug-reproduce

Describe your issue

Crash

const c = "#52d71e";
console.log(`bg-[${c}]`);

 ⨯ ./app/globals.css:485:25
Parsing css source code failed
  483 |   }
  484 |   .bg-\[\$\{c\}\] {
> 485 |     background-color: ${c};
      |                         ^
  486 |   }
  487 |   .bg-background {
  488 |     background-color: var(--background);

I saw the documentation saying that "Don't use props to build class names dynamically", but ​It seems a bit unconventional that console.log could also cause a crash.

[wongjn]

Yes, it will still cause a crash since Tailwind can't differentiate how a string is used. It only sees that it exists. This is because it doesn't run your code. Rather, it scans the code as plain text files. Thus it sees bg-[${c}] as a valid class string, which then causes invalid CSS to be built later.

[Autumnal-Joy]

Also, once it crashes, the dev server does not work, unless deleting the build directory and run dev again.