`-` works as a custom variant, but `--` doesn't

[benface]

What version of Tailwind CSS are you using?

v4.1.12

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

Tailwind Play, Vite, etc.

What version of Node.js are you using?

v24

What browser are you using?

Firefox, Safari, Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/dYzm7i79CK

Describe your issue

Like the title says. Interestingly, IntelliSense seems to say that the following CSS will be generated:

.--\:bg-amber-500 {
  @layer x-unimportant {
    background-color: var(--color-amber-500) /* oklch(76.9% 0.188 70.08) */;
  }
}

However, it's not.

[RobinMalfait]

Hey!

This is actually a bug and both - and -- should not be valid variants. The reason we allow - is because we do allow kebab-case variants but the dashes should not exist on their own.

While Tailwind Play (ish) and Intellisense pick it up, if you use it in a real project we won't even find the -:flex or --:flex variants.

So whatever fix we pic, we will have to make sure that all the tools are in sync here.

[RobinMalfait]

Alright figured out the inconsistencies:

• Oxide (underlying library we use for scanning the file system and extracting candidates) never picked up classes starting with -- or variants starting with -.
• Tailwind Play uses Tailwind's core directly without using Oxide for scanning the file system which is why it did generate the -:bg-amber-500 example. However, a candidate starting with -- was considered a CSS variable and never generated CSS.
• Intellisense uses internal APIs, the same as Tailwind Play but without that additional check that filtered out CSS-variable looking candidates.

All these inconsistencies should be solved by #18867

[benface]

Thanks @RobinMalfait! I just did some more tests (using version 4.1.12, not your PR) and it looks like variants that end with a - also don't work (not just those that start with one), despite IntelliSense implying they do. I don't know if your PR fixes that as well?

[RobinMalfait]

@benface yep that seems like another thing we'll have to fix. Good catch! It's a similar story where Intellisense / Tailwind Play pick it up today: https://play.tailwindcss.com/dOAhA70LX2, but Oxide doesn't.

Will open a follow up PR to solve this as well.

[benface]

Oh, and also, variants that start/end with an underscore. 😅

[RobinMalfait]

Yeah for the start one that's already solved now. Ending will be in the next PR!

[RobinMalfait]

Fixed by: #18872