Pixel preview not computing if varible has a `.` in the name

[lucas-subli]

What version of VS Code are you using?

For example: v1.104.1

What version of Tailwind CSS IntelliSense are you using?

For example: v0.14.26

What version of Tailwind CSS are you using?

For example: v4.1.12

What package manager are you using?

pnpm

What operating system are you using?

Ubuntu 24.04

Tailwind CSS Stylesheet (v4) or config file (v3)

@theme {
(...)
	/* =~= Add extra font sizes =~= */
	--text-2.5xl: 1.625rem /* 1.625rem = 26px */;
	--text-2.5xl--line-height: calc(2 / 1.625);
(...)

Describe your issue

I wanted to create a new text size between 2xl and 3xl. Naturally I called it 2.5xl. If I do it the preview does not show the pixel value. However if I don't use the . and instead use a - or call it anything else without a . the value is computed correctly. See examples below.

Usign a .

--text-2.5xl: 1.625rem /* 1.625rem = 26px */;
--text-2.5xl--line-height: calc(2 / 1.625);

Using a -

--text-2-5xl: 1.625rem /* 1.625rem = 26px */;
--text-2-5xl--line-height: calc(2 / 1.625);

Expected behavior:

I expected the pixel value to be correctly displayed even with the . in the variable name, as this would allow me to have a intuitive extra granularity level with a proper preview value without disrupting the existing ones.

[thecrypticace]

Thanks for reporting this. This will be fixed in the next release (some time this week).