Cannot use `theme()` within `calc()` in arbitrary value

[Redmega]

What version of Tailwind CSS are you using?

v3.0.18

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

Next.js 12.0.8, Webpack ^5, PostCSS ^8.4.5

What version of Node.js are you using?

v16.13.1

What browser are you using?

Firefox, Chrome

What operating system are you using?

Ubuntu

Reproduction URL

https://play.tailwindcss.com/zsAHSyoNVo

Describe your issue

I posted to a closed issue, reposting here in the hopes that it doesn't get lost again: #6791

I'm facing this same issue trying to get calc() to work with theme() in an arbitrary value. According to the intellisense it's valid, but the css never actually gets generated/injected:

h-[calc(100%-theme('spacing.16'))]

[adamwathan]

Hey! You can make this work by getting rid of the quotes:

https://play.tailwindcss.com/mn0S0290Tm

Ideally we can make it work with quotes too though, will leave this open so we at least look into it a bit more.

[Redmega]

Ah! It was my understanding that quotes were necessary in the postcss (and therefore in the arbitrary values as well). How does theme(spacing.16) work without the quotes, if there's a quick answer to that? (I see now doublechecking that previous closed issue that there were no quotes used within theme(), not sure why my brain decided to add them...)

In any case thank you for the workaround!