There is no way to use theme() with a arbitrary value or property containing a dot

[Serator]

What version of Tailwind CSS are you using?

For example: v3.0.8

What browser are you using?

Chrome 96.0.4664.110

What operating system are you using?

Windows 10

Reproduction URL

https://play.tailwindcss.com/FivB5hnvPh

Describe your issue

There is no way to use theme() with a arbitrary value or property containing a dot.

tailwind.config.js

module.exports = {
  theme: {
    spacing: {
      .5: 'calc(.5 * .25rem)',
      1: 'calc(1 * .25rem)',
    },
  },
}

Example code

<div class="w-[theme(spacing[0.5])]">Error</div>
<div class="w-[theme(spacing[1])]">Error</div>
<div class="w-[theme(spacing\[1\])]">Error</div>
<div class="w-[theme(spacing.1)]">Correct</div>

[RobinMalfait]

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

I've opened a PR to validate this behaviour and it looks like we already fixed it. This will be available in the next version (released later today) but you can already try it using the insiders build: npm install tailwindcss@insiders

[Redmega]

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'))]

https://play.tailwindcss.com/zsAHSyoNVo