Syntax highlighting for Tailwind CSS v4 directives (@utility, @custom-variant, @variant)

[devenini]

What version of VS Code are you using?

v1.98.0

What version of Tailwind CSS IntelliSense are you using?

v0.14.8

What version of Tailwind CSS are you using?

v4.0.9

What package manager are you using?

npm

What operating system are you using?

macOS

VS Code settings

{
    "tailwindCSS.experimental.configFile": "./src/styles/main.css",
    "files.associations": {
        "*.css": "tailwindcss"
    }
}

Describe your issue

Currently, when using Tailwind CSS v4 directives such as @utility, @custom-variant, or @variant, syntax highlighting is lost, and everything appears as plain white text. This makes it difficult to differentiate styles and maintain readability.

Features like suggestions and hover work correctly.

Steps to reproduce:

• Use any of the Tailwind CSS v4 directives in an editor with syntax highlighting.
• Observe that the syntax coloring disappears.

[thecrypticace]

This is something I have on my todo list. Might spend some time on it in the next week or two. I was really hoping that nested CSS syntax highlighting in VSCode's native CSS grammar would've shipped by now but it hasn't yet so need to handle this ourselves.

[haversnail]

FWIW, it seems that nesting your styles will trigger the correct syntax highlighting; for example:

@utility tab-* {
  & {
    tab-size: --value(--tab-size-*);
  }
}

In VS Code:

Not ideal ofc, but helps keep me sane for the time being. 🙂