V4 prefix function linting error

[francisashley]

What version of Tailwind CSS are you using?

v4.1.5

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

vite 6.3.5

What version of Node.js are you using?

v20.16.0

What browser are you using?

Not a browser issue

What operating system are you using?

osx

Describe your issue

There are no issues running TailwindCSS V4 however VSCode displays a linting error for the new v4 prefix function. According to Biome this is not valid syntax. I'm not using Biome but just sharing that for reference.

Here is a screenshot of the issue:

Any idea how to fix this?

[wongjn]

You could do one of:

• Install the Tailwind CSS Intellisense VSCode extension and set the recommended VSCode settings.
• Disable CSS linting/validation in VSCode.

[francisashley]

Thanks for the links and clarifying (as i'm reading from the recommended vscode settings) that this is bespoke tailwindcss syntax and not upcoming additions to the css spec.

[francisashley]

I do think forcing the user to cast css > tailwindcss is pretty short sighted given vscode doesn't allow configuring per-project, so now css files in all projects are treated as tailwindcss.

"files.associations": {
  "*.css": "tailwindcss"
}

[wongjn]

as vscode doesn't allow configuring per-project

VSCode does allow configuring per workspace at least. Further, I believe the keys for files.associations are globs, so you could even have only some files in the same workspace use the tailwindcss language.