[IntelliSense] Autocompletion doesn't work with custom modifier (opacity)

[unional]

Tailwind 4 config:

@theme static {
  --opacity-4: 4%;
}

Autocompletion on bg-red-100/<caret> still shows /5, /10 etc. but not /4.

[rozsazoltan]

https://play.tailwindcss.com/88VhNq72oT

The modifier has nothing to do with opacity, it accepts any value, since the modifier's value is inserted into the CSS in a special way:

Generated CSS (/69 -> 69%)

.bg-emerald-500\/69 {
  background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 69%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-emerald-500) 69%, transparent);
  }
}

In conclusion, you don't need autocompletion, since I assume you know what you want to type.

Otherwise, regardless of any config, it should handle completion properly from 1 to 100? It might be irritating when I'm typing 40 and the first suggestion is 4, which makes no sense? And if 40 comes up first, then when you type 5 you'll be annoyed that 50 is ranked higher - so I think it's not very useful either way, I'd type the number faster myself.

[unional]

It currently shows 5, 10, 15, ..., 100.
My config has 4, 8, 12, ... Also has semantic tokens such as opacity-disabled: 40%;.

I'm building a design system for my company with 100+ engineers.

Would like to have the autocompletion to show 4, 8, 12, ..., 100, disabled,
so that they can tell which value are supported and consistent with the design system and not using values outside of it.

For reference, bg-emerald-500/disabled would translate to:

.bg-emerald-500\/disabled {
    background-color: color-mix(in oklab, var(--color-emerald-500) var(--opacity-disabled), transparent);
}

which uses the opacity-disabled token.