Tailwind incorrect generate CSS variables as minus sign

[bakura10]

What version of Tailwind CSS are you using?

3.0.23

Hi,

I am not sure if this issue is linked to the other problems I have reported in #7874 and #7884 as the output issue seems different. I am therefore opening a new issue.

If I use the following CSS:

.prose h1 {
    @apply tw-text-[length:var(--heading-h1-font-size)];
  }

Tailwind will generate the following code:

.prose h1 {
  font-size: var(--heading-h1 - font-size);
}

For some reason the dash after the -h1 part is considered as a minus (maybe due to the number ?). In all cases this seems like a bug.

Thanks :)

[adamwathan]

Definitely seems like a bug and I think you’re right it’s probably because of the number! Will try to look at this this week 👍🏻