[v4] @utility directive's content css doesn't have intellisense for css properties

[idan-faibish]

What version of Tailwind CSS are you using?

4.0.0

What build tool (or framework if it abstracts the build tool) are you using?

vite 6.0.11

What version of Node.js are you using?

20.13.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Describe your issue

as stated in the title.
when using the new @utility directive, the inner css code doesn't have any intellisense. its like we are not using any css code.
(the code itself is working just fine, its only an intellisense issue)

in the image below, we can even see that the coloring (plain white) indicates it

[danwetherald]

I an also confirm this is not working.

[Eptagone]

It happens to me too

[thecrypticace]

This will be fixed in the next release of the extension 👍 (should be later today)

[idan-faibish]

@thecrypticace it looks like the issue was indeed resolved,
but the coloring is still missing, so both the properties and the values are currently white.

[thecrypticace]

@idan-faibish Ah yeah so syntax coloring is a completely separate process in VSCode and is completely unrelated to the language server. This is primarily related VSCode's own CSS language not supporting nesting. I'm gonna try to fix that for our own CSS language soon though.

[devenini]

Hey @thecrypticace! Any update on syntax coloring? 🙏 Currently everything is white as soon as you use a directive like @utility, @custom-variant or @variant. Let me know if there is another issue/PR I can follow

[me-nkr]

I am still getting this issue in neovim and vscode

[thecrypticace]

@me-nkr Neovim doesn't run our css language server so this makes sense. As of the last release (or two) of the language server we do actually build & publish the file for this. I might need to add an export for it (but also maybe not). You would have to configure nevoid to use it for CSS files. The language server protocol doesn't allow us to intercept / replace / hide stuff from other language servers which is why it has to operate as a separate server that replaces the existing CSS one.

As for VSCode, if you're seeing this there can you open a separate issue and provide a reproduction please?

[jorgebef]

@me-nkr Neovim doesn't run our css language server so this makes sense. As of the last release (or two) of the language server we do actually build & publish the file for this. I might need to add an export for it (but also maybe not). You would have to configure nevoid to use it for CSS files. The language server protocol doesn't allow us to intercept / replace / hide stuff from other language servers which is why it has to operate as a separate server that replaces the existing CSS one.

As for VSCode, if you're seeing this there can you open a separate issue and provide a reproduction please?

Sorry to bring up an old issue. I use neovim and having intellisense inside @utility would be fantastic.
You mention that we can replace the CSS language server with Tailwind's custom implementation if I understand correctly?

I've checked, but can't find the way to do so.
Would you be able to give any hints as to how we can launch/use this custom language server for tailwind?

Thanks in advance!

[thecrypticace]

@jorgebef So you'll technically get some IntelliSense support inside @utility (completions for things like --value() and --modifier()) but not from the CSS language server which is likely what you're wanting most.

Unfortunately, I don't know enough about Neovim to know how to replace the CSS language server for it but basically what you'd need to do (somehow) is:

• Configure a custom binary path for CSS files to point to to css-language-server inside the @tailwindcss/language-server package
• Configure .css files to have a language of tailwindcss instead of css

cc @RobinMalfait any chance you'd know how to reconfigure Nevoim to do this or nah?