Unexpected unknown at-rule "@utility"

[dcmayankavi]

While using TailwindCSS v4.0 getting Unexpected unknown at-rule "@Utility" error in sonarcube while using below code:

@utility display-* {
    display: --value([*]);
}

[nomad-mystic]

I had the same issue while using a JetBrains IDE, once I updated it went away

[nomad-mystic]

[HHsomeHand]

I got this while I use vs code in 2025/06/01
This is so annoying
I don't know how to disable this warnning

@import "tailwindcss";

@theme {
    --color-primary: #484848;
    --color-secondary: #222222;
}

Unknown at rule @themecss(unknownAtRules)

[dmk-cn]

I had the same issue, and it turned out to be a VSCode configuration problem, not a Tailwind or plugin bug.

If you're using Tailwind v4 and the @source directive in a .css file, make sure to set this in your VSCode settings:

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

[rozsazoltan]

Related:

• https://discord.com/channels/486935104384532500/486935104384532502/1390768558992130220
• Tailwind CSS v4 - Unknown at rule @plugin, @custom-variant, @theme, @utility, @variant in global.css
• IntelliSense for VSCode

I linked a SO answer, I'd like to highlight one part of it: after installation, you'll need to manually specify in your VSCode settings which file extensions should be treated as TailwindCSS format. (This might not be necessary in every project or situation.) Personally, I usually set this globally in my settings.

After that, tell VSCode that you want to treat your .css files as TailwindCSS. You can do this in the settings under files.associations like this:

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