Fix 'Unknown at rule @tailwind' warning in VS Code

Problem: you include Tailwind in a project like this, but you get the warning Unknown at rule @tailwindcss(unknownAtRules) in VS Code:

The warning is harmless. VS Code validates the file as plain CSS, and plain CSS has no @tailwind rule. That directive only means something to Tailwind itself, which processes it at build time and replaces it with real CSS.

Your build works fine. Only the editor complains. You’ll see the same warning on the other Tailwind directives too, like @apply and @layer.

Here’s how to fix this.

Change the language mode

Open a CSS file in your project, and from the VS Code Command Palette choose “Change Language Mode”, then pick “Tailwind CSS” from the list.

That language mode is provided by the official Tailwind CSS IntelliSense extension, so install it first if you don’t see the option in the list. You want it anyway, for the class name autocompletion.

Changing the mode from the palette only affects the currently open file. To make it stick for the whole project, open .vscode/settings.json (create it if you don’t have it in your project) and type

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

Now every .css file in the project is treated as Tailwind CSS. Since this file lives in the project, the fix also applies to anyone else who opens it.

Or hide the warning

In VS Code you can also hide those warnings, because they’re just …warnings we don’t need to be warned about.

Open the settings, search for “unknown”, the first result should be the one you’re looking for: CSS > Lint: Unknown At Rules:

Change that to ignore:

The settings.json equivalent is "css.lint.unknownAtRules": "ignore", in case you prefer editing the file directly.

Done!

One tradeoff with this second approach: it silences every unknown at-rule, so a genuine typo like @meida instead of @media goes unnoticed too. That’s why I prefer the language mode fix.