Tailwind CSS v4 custom classes in plugin not showing IntelliSense in VS Code when building UI library

I'm currently building a custom component library (similar to DaisyUI) using Tailwind CSS v4. I'm defining custom utility classes such as .badge, .badge-success, .badge-error, etc., through a plugin using the recommended addComponents API like this:

@layer utilities {
  .btn-gradient-green-1 {
    background: var(--primary-6);
  }
}

• ✅ The styles are correctly generated in the final CSS
• ❌ But IntelliSense does not suggest any of these custom classes (e.g. .badge-success) in VSCode with the official Tailwind CSS IntelliSense extension.

I tried placing these in @layer utilities and even raw .css files — same result.

You're not actually registering any class names with Tailwind that way - you are simply writing CSS.

To properly register class name rules with Tailwind, you'd use @utility like:

@utility btn-gradient-green-1 {
  background: var(--primary-6);
}

This should then add btn-gradient-green-1 as a class name candidate, which should then show up in Intellisense.