Fixed: "Unknown at Rule @tailwind" Warning in VS Code

The problem: VS Code underlines @tailwind directives in your CSS file with a squiggly warning, even though Tailwind compiles and works fine in the browser.

Environment: Laravel 11, Tailwind CSS 3.x, VS Code 1.9x, default CSS Language Server

The Error

● ● ●  Problems panel

Unknown at rule @tailwind  cssUnknownAtRules [Ln 1, Col 1]
Unknown at rule @apply      cssUnknownAtRules [Ln 14, Col 3]

Why It Happens

This is purely a VS Code editor problem, not a build problem — your CSS still compiles correctly because PostCSS and the Tailwind compiler understand these at-rules perfectly well. The warning exists because VS Code's built-in CSS Language Server only knows standard CSS at-rules (@media, @import, @keyframes, etc.) and has no idea Tailwind's custom at-rules exist.

When Tailwind's own official extension isn't installed, or is installed but the workspace's CSS validation setting hasn't been told to trust it, the built-in linter keeps flagging every @tailwind, @apply, @layer, and @screen directive as invalid syntax — purely cosmetic, but distracting enough that it looks like something's broken.

The Fix

Install the official Tailwind CSS IntelliSense extension first — it provides autocomplete and hover previews on top of fixing the warning:

ext install bradlc.vscode-tailwindcss

Then disable the built-in CSS validator so it stops fighting with Tailwind's syntax, and tell VS Code to treat your Tailwind directives as known. Add this to your workspace settings:

.vscode/settings.json

{
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    "editor.quickSuggestions": {
        "strings": "on"
    }
}

If you'd rather keep CSS validation on for other files and only silence Tailwind-specific unknown at-rules, use this instead of fully disabling css.validate:

.vscode/settings.json

{
    "css.lint.unknownAtRules": "ignore"
}

Step-by-Step

1. Install the official Tailwind CSS IntelliSense extension from the VS Code marketplace.
2. Create or open .vscode/settings.json in your project root (not global settings, so it only affects this project).
3. Add either the full css.validate: false block or the narrower css.lint.unknownAtRules: "ignore" setting.
4. Reload the VS Code window: Ctrl+Shift+P → "Developer: Reload Window".
5. Open your Tailwind CSS file again and confirm the squiggly warnings are gone.
6. Verify autocomplete now works by typing a partial class name inside a Blade or Vue file with class="".

Edge case: If you're using Tailwind inside .blade.php files directly (utility classes in Blade markup, not a separate CSS file), the IntelliSense extension needs an extra config entry to recognize Blade as an HTML-like language — otherwise autocomplete works in .vue/.jsx files but stays silent in Blade views. Add "blade": "html" under tailwindCSS.includeLanguages in your settings.

Still seeing warnings after installing the extension? Contact me here and I'll help sort out your config.