Tailwind compiler crashes when you try to [--box-shadow:theme('boxShadow.doesNotExist')]

[Odas0R]

What version of Tailwind CSS are you using?

v3.1.8

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

vite 3.0.9, postcss 8.4.14 postcss-cli 8.3.1

What version of Node.js are you using?

v16.0.0

What browser are you using?

Chrome

What operating system are you using?

PopOS, Ubuntu

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-zy2efk?file=src/App.jsx

Describe your issue

I was thinkering with tailwind to find ways of modifying css variables with classes. Came up with something like

  <button className="[--box-shadow:theme('boxShadow.sm')] bg-white p-5">
    Button
  </button>

But if I change the theme to something that will throw a runtime error:

  <button className="[--box-shadow:theme('boxShadow.doesNotExist')] bg-white p-5">
    Button
  </button>

Still crashes if I change it back to:

  <button className="[--box-shadow:theme('boxShadow.sm')] bg-white p-5">
    Button
  </button>

Well, maybe the Tailwind compiler crashes and can't recover?

It's a bug, I think!?

[thecrypticace]

Hey — thanks for the report. This one is definitely a bug!

As a workaround you can restart Vite and the error will go away. The problem here is that we were generating the arbitrary property, it shows up in the CSS, and then we evaluate the theme function causing it to error. However, as an optimization, we don't re-scan all your content files in watch mode so we can't necessarily guarantee that you stopped using a specific utility. This meant that even if you fixed it we still had record of it hence why the error didn't go away. I've updated things so we'll now throw this out and it shouldn't be matched any longer.

This change will go out in our next release — and should already be in our insiders build if you want to try it out before then.

[Odas0R]

Great!! Thanks for the explanation :)