Resolving 'Unknown at rule @tailwind' Error in VS Code

Problem Statement

When working with Tailwind CSS in VS Code, you may encounter an "Unknown at rule @tailwind css(unknownAtRules)" warning or error. This occurs when your CSS file contains Tailwind's proprietary directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Visual Studio Code's built-in CSS validator doesn't recognize these @tailwind directives since they're not standard CSS at-rules. While they're valid in Tailwind's processing pipeline, the editor flags them as errors unless properly configured.

Recommended Solutions

1. Install Official Tailwind CSS Extensions

Tailwind CSS IntelliSense (Recommended)

1. Install the official Tailwind CSS IntelliSense extension
2. Add this configuration to your VS Code settings (JSON):

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

This informs VS Code to treat all CSS files with Tailwind's language mode.

PostCSS Language Support (Alternative)

Install the PostCSS Language Support extension for broader PostCSS syntax support.

2. Manually Set File Language Mode

Change the language mode for individual CSS files in VS Code:

1. Open a CSS file containing @tailwind directives
2. Click on the language mode in the bottom-right status bar (usually shows "CSS")
3. Select "Tailwind CSS" from the dropdown menu

WARNING

You may need to install either Tailwind CSS IntelliSense or PostCSS Language Support first before "Tailwind CSS" appears as an option.

3. Update Configuration for Tailwind v4

If you're using Tailwind CSS v4 or later, replace @tailwind directives with standard CSS imports:

@import "tailwindcss";

This matches Tailwind's new architecture in v4 and resolves the validation error since @import is a standard CSS rule.

Additional Configuration Options

Disable Linting for Unknown At-Rules

As a temporary workaround, disable the specific lint rule:

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

::: caution This approach disables all unknown at-rule warnings in CSS files, which might hide legitimate issues. :::

Verify Tailwind Config Format

Ensure your tailwind.config.js uses correct module exports:

// CommonJS (Node.js environments)
module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

// ES Modules (Vite, modern frameworks)
export default {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Troubleshooting and Verification

After implementing a solution:

1. Restart VS Code
2. Check if warnings disappear
3. Ensure Tailwind classes still compile properly
4. Verify your tailwind.config.js path matches your project structure

Version-Specific Notes

• Tailwind v3 and earlier: Use @tailwind base; + configuration from this article
• Tailwind v4 and later: Use @import "tailwindcss"; + updated setup

Choose the solution that best matches your version and workflow requirements. For most users, installing the official Tailwind CSS IntelliSense extension with file association configuration provides the best experience.