Nextjs: Arbitrary value from variable not applied

[braydoncoyer]

What version of @tailwindcss/jit are you using?

v0.1.6

What version of Node.js are you using?

v14.15.4

What browser are you using?

Chrome

What operating system are you using?

macOS Big Sur

Reproduction repository

https://github.com/braydoncoyer/tailwindcss-jit-dynamic-value-bug

Hi Team,

After enabling the TailwindCSS JIT compiler in a Next.js project, I opened the index.js file and created a div with a background color defined by an arbitrary value (bg-[#db1424]). The browser updates and I can see the div with the appropriate color applied. If I try to extract this hex color into a variable and inject it as a classname via template literals, it does not show up in the browser.

The example repo linked to this issue has two divs: one with an arbitrary bg value injected with template literals, and another div with an arbitrary bg value pasted inline. The second div is the only one showing the correct value in the browser.

I've run into weird cases with the dynamically injected color works at times when I tinker with restarting the dev server or changing the hex color, but I can't find a pattern to narrow down the issue.

[adamwathan]

Hey! Yeah what you are trying to do can't work unfortunately, all the classes need to be statically extractable and that's done with just a simple regex, not actually parsing or evaluating code. You can imagine it would be impossible for us to generate CSS at build time if part of the class name was the result of a fetch call or something for example.

Fundamentally you still need to author your templates with the same considerations about making them "purgeable", as with the ahead-of-time version of Tailwind:

https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html

[braydoncoyer]

Understood - thanks for taking the time to respond, sir!