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.

[philipp-spiess]

@Autumnal-Joy This type of string-interpolation in class names won't work with Tailwind CSS anyways since it doesn't know what value c can refer to at runtime: https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names

I do agree that a crash is not a great experience though, it would be great if we can avoid an expensive validation at this step, though 🤔

[RobinMalfait]

Hey!

While a syntax using string interpolation won't work (see: https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names), we still provided a fix in #17142 to make sure that these classes aren't even picked up in the first place. So your builds shouldn't fail anymore due to invalid CSS.

This will be available in the next release.