theme() function is not available when adding arbitrary properties

[ARZarkesh]

What version of Tailwind CSS are you using?

3.0.7

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

webpack 5.65.0, postcss 8.4.5

What version of Node.js are you using?

v16.13.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

(https://play.tailwindcss.com/RjtpBVfT0a)

Describe your issue

theme() function not works in arbitrary properties. But works in normal css.

[adamwathan]

Ah good catch! I think this is an issue with how we match possible classes in templates.

Will look into it, in the mean time though you can workaround this by getting rid of the quotes:

<p class="[--y:theme(colors.blue.500)]">...</p>

https://play.tailwindcss.com/K7uUfygTjO

They are optional but we document it with them because it tends to syntax highlight better in people's editors 👍🏻

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed, and will be available in the next release (probably later today).

You can already try it by using the insiders build npm install tailwindcss@insiders or yarn add tailwindcss@insiders.