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. 🙂

[callummr]

Forgive the likely naiive take, I've just found this issue while wondering what's wrong with my @utility rules and have no knowledge of VS Code extensions. Just changing the utility body include from source.css#rule-list to source.css#rule-list-innards seems to fix the highlighting for me. Nesting is still broken, but having the expected syntax at the top level seems like a real and quick improvement while nesting is worked/waited on?

tailwindcss-intellisense/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json

Line 363 in bd1fc8c

"include": "source.css#rule-list"

[thecrypticace]

I've a got a PR open that addresses some of this. Proper nesting support will come in a separate PR later.

[thecrypticace]

I'll get some improvements for these out tomorrow 👍