VS Code's built‑in CSS linter doesn't recognize Tailwind's custom at‑rules (like @tailwind, @apply, @variants, etc.), so it flags them as "Unknown at rule." It's purely a linting warning and doesn't break your Tailwind workflow — but annoying.

I haven't used Tailwind much in the past but seems good for vibe coding.

The best option is to install these extensions:

  • Tailwind CSS IntelliSense (provides autocomplete, hover info, linting)
  • PostCSS Language Support (recognizes PostCSS/Tailwind syntax)

With those settings and extensions:

  1. VS Code highlights Tailwind utilities correctly.
  2. You no longer see misleading "Unknown at rule" underlines.
  3. You get full IntelliSense for Tailwind's classes and configuration.

The fast fix is to add this to your .vscode/settings.json:

{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "css.lint.unknownAtRules": "ignore",
  "scss.lint.unknownAtRules": "ignore"
}

What this does:

  • files.associations: tells VS Code to use the Tailwind CSS language mode for .css files.
  • css.lint.unknownAtRules: silences "Unknown at rule" warnings in plain CSS.
  • scss.lint.unknownAtRules: silences them in SCSS.