Utility classes are not generated when using escaped special characters in theme variable names

[vkhalikov]

What version of Tailwind CSS are you using?

v4.1.18

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

Vite 6.2.6

What version of Node.js are you using?

v24.4.1

What browser are you using?

Chrome, Safari

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/MhIIQSyw5e?file=css

Describe your issue

Hello and thanks for the wonderful library. Tailwind v4 is really nice to use.
I have a color pallete that we used in v3 which looks like:

  '@elevation-base': 'var(--color-gray-50)',
  '@fg-pro-base': 'var(--color-purple-500)',

In the process of migration to v4, I converted it to:

@theme inline {
  --color-\@elevation-base: var(--color-gray-50);
  --color-\@fg-pro-base: var(--color-purple-500);
}

But it doesn't seem to work properly when I try to use it like this:

While IntelliSense is working great, utility class is not generated.

[wongjn]

I think this is due to certain rules in the content scanner, where only a subset of characters are actually allowed in the theme token part of class names. Intellisense could be a misnomer perhaps because it doesn't include this validation.