@utility wildcard classes are not recognized by IntelliSense (autocomplete not triggered)

[webtaya]

I'm experimenting with the new @utility directive in Tailwind CSS 4.0 and trying to define a dynamic utility using a wildcard pattern.

Here’s a simplified example of what I'm using:

@utility viewport-* {
  --viewport-min: --spacing(--value(integer));
  --viewport-max: --spacing(--modifier(integer));
  --viewport-min: --value(integer, [integer]);
  --viewport-max: --modifier(integer, [integer]);
}

My goal is to have class names like viewport-375/1440 and similar.

While the utility works as expected during build, I noticed that IntelliSense in VS Code does not recognize or suggest viewport- when typing class names.

Even basic suggestions like viewport- do not appear in the autocomplete dropdown, making it harder to discover or use these utilities efficiently in the editor.

Is this a limitation of the IntelliSense plugin, or is there a recommended approach to support suggestion/autocomplete for custom dynamic utilities like this?

Any insight or roadmap updates would be appreciated.

[webtaya]

Also, as a follow-up question:
Is there a way to support negative values in @utility definitions that use --value and --modifier?

For example, if I want to define a class like translate-x-rng--50/100 or translate-x-rng-[-50]/100, is there a reliable way to parse and use -50 as a min value inside the utility?

I tried:

--translate-x-min: --value;

But that seems unsupported or causes the entire utility to be ignored.
Any best practices or workarounds for using negative values in dynamic utility classes?

[wongjn]

You'd register negative utilities separately,

[wongjn]

Suggestions seem to work in Tailwind Play at least:

Your issue could indicate a problem with intellisense finding your input CSS perhaps. You could try explicitly declaring your input CSS file.

[mustafa-soylemez]

Thanks for the suggestion! Just to clarify, my input CSS is being picked up correctly — other @utility classes like:

@utility text-orientation-mixed {
  text-orientation: mixed;
}

are recognized by IntelliSense just fine.

However, dynamic utilities like viewport-* don't trigger any suggestions at all, even though they work correctly during build.

I also tried the config path override you mentioned: "tailwindCSS.experimental.configFile": "src/style/style.css"

But that actually broke all autocomplete functionality for me — even for regular classes. So I had to revert it.