[intellisense]: IntelliSense hides utility if name matches custom variant

[programming-with-ia]

Describe your issue

When I define a custom utility and a custom variant with the same name, IntelliSense in VSCode only shows the variant — the utility is missing from suggestions.

Tailwind generates the utility class correctly in the final CSS output. This is only a VSCode IntelliSense issue.

What version of Tailwind CSS are you using?

tailwind: v4.0.15
windows: 11
vscode: latest
Tailwind CSS IntelliSense: latest

Example

@custom-variant mica (&.mica);

@layer utilities {
 
  .mica {
    @apply bg-background
  }
}

[wongjn]

You can try registering the class name with @utility for Tailwind to know about it:

 @custom-variant mica (&.mica);

-@layer utilities {
-  .mica {
+@utility mica {
   @apply bg-background
 }
-}

[RobinMalfait]

Hey!

The intellisense plugin will only match actual utilities and variants. The .mica class in the utilities layer is considered normal user CSS, not a utility.

If you want it to be a utility, you have to use the @utility directive. More info: https://tailwindcss.com/docs/upgrade-guide#adding-custom-utilities

[programming-with-ia]

theme format issue ☺️

[thecrypticace]

The syntax highlighting is something I'm working on fixing. Spent some time on it yesterday and hoping I don't have to copy the entire CSS theme from CSCode but not sure yet. Was hoping it was going to get proper nesting support by now but it has not so it'll take some work to do so.