[SOLVED] Unknown at rule @tailwind & @apply Warning in VS Code & PostCSS

Upon opening globals.css or style.css in projects utilizing Tailwind CSS, Visual Studio Code paints squiggly warnings under @tailwind base;, @apply, and @layer stating: Unknown at rule @tailwind(unknownAtRules) or Unknown at rule @apply. While production builds compile cleanly, these false alarms clutter the editor and distract from actual CSS defects.

Step-by-Step Solution

Step 1: Suppress Unknown At-Rule Warnings in VS Code Settings

Instruct the built-in language server to disregard custom directives:

1. 1

   Step 1

   Press Ctrl + Shift + P (Cmd + Shift + P on macOS).
2. 2

   Step 2

   Select Preferences: Open User Settings (JSON).
3. 3

   Step 3

   Append these properties to your settings.json:

{
  "css.lint.unknownAtRules": "ignore",
  "scss.lint.unknownAtRules": "ignore",
  "less.lint.unknownAtRules": "ignore"
}

Step 2: Install Tailwind CSS IntelliSense Extension

Install the verified Tailwind CSS IntelliSense extension from the Visual Studio Code marketplace. This extension equips the editor with autocomplete tooltips, linting for utility classes, and native recognition of @tailwind, @config, and @apply syntax.

Step 3: Map CSS File Associations to Tailwind Mode

Assign .css files to Tailwind's grammar parser rather than the generic browser CSS validator:

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

This replaces the legacy CSS scanner with full Tailwind-native AST understanding.

Frequently Asked Questions

Does this warning impact production build output?

No. The warning is strictly an IDE linting quirk. PostCSS evaluates and replaces @tailwind directives during compilation without issue.

Why does @apply fail inside nested SCSS selectors?

PostCSS must run after Sass compilation. Ensure your bundler executes sass-loader before postcss-loader in your asset pipeline.