IntelliSense for custom utilities and component classes

[JonathanSussman1]

Hey, we have been using the extension in VS2026 with Tailwind 4 and it is super helpful.

One thing that seems to be missing that would make things much more manageable for us is if the IntelliSense could pick up on custom classes or utilities that are included in or imported into an input config file. For example, in our input css file, we have something like:

import "./custom-utilities.css"

then in custom-utilities.css we have:

@utility text-primary {
    color:var(--color-text-primary);
}

when typing out "text-p..." IntelliSense does not show "text-primary" as a completion suggestion. I've also tried adding the @Utility directly to the input file instead of importing it via a separate css file, as well as defining a regular css class in the input file.

Not sure how feasible it would be for completions to work for custom classes (particularly @Utility classes) but it would be nice. Thanks!

[theron-wang]

Hi @JonathanSussman1,

I believe this is already a feature; I've tried this on my end and it seems to be working fine:

tailwind.css:

@import "tailwindcss";
@import "./custom-utilities.css";

custom-utilities.css:

@utility text-primary {
    color: var(--color-text-primary);
}

Alternatively, I also tried:

Just tailwind.css:

@import "tailwindcss";

@theme {
    --color-primary: #000;
}

Is there anything I am missing? Sorry for the inconvenience.

[JonathanSussman1]

If it helps to diagnose, this is our file structure (excluded a few things for simplicity)... maybe it has something to do with us having to import tailwind's theme and utilities modules independently by their filesystem paths (instead of the typical @import "tailwindcss") since we didn't want to fully include preflight?

input.css:

@layer theme, utilities;
@import "./node_modules/tailwindcss/theme.css" layer(theme);
@import "./node_modules/tailwindcss/utilities.css" layer(utilities);
@import "./custom-utilities.css"; 

tailwind.extension.json:

{
  "$schema": "https://raw.githubusercontent.com/theron-wang/Tailwind-CSS-for-Visual-Studio/refs/heads/main/tailwind.extension.schema.json",
  "BuildFiles": [
    {
      "Input": "..\\input.css",
      "Output": ".\\wwwroot\\tailwind\\output.css",
      "Behavior": "Default"
    }
  ],
  "PackageConfigurationFile": null,
  "CustomRegexes": {
    "Razor": {
      "Override": false,
      "Values": []
    },
    "HTML": {
      "Override": false,
      "Values": []
    },
    "JavaScript": {
      "Override": false,
      "Values": []
    }
  },
  "UseCli": false
}

[theron-wang]

Thanks so much. It was the lack of @import "tailwindcss"; the extension didn't handle other forms of Tailwind import before. This should be fixed in 1.13.12, so if you could update and confirm if that fixes the issue, that would be appreciated.