If you use Visual Studio Code, you can use the PostCSS Language Support plugin.

Make sure you associate your scss files with PostCSS by adding the following to your settings.json file: "files.associations": { "*.scss": "postcss" }.

2022-05 Update

The official Tailwind CSS IntelliSense extension now extends the built-in CSS language mode to fix these lint warnings, without losing any of VS Code’s default IntelliSense features.

Review the Recommended VS Code Settings section to enable this for all CSS files in your workspace.

I leave my original answer intact below if you don’t want to install an additional extension, but since v0.8.0 it no longer conflicts with the built-in CSS support so that would be my recommended approach.

Old Answer Without Extension

Visual Studio Code allows you to define Custom Data for CSS Language Service.

For example, in your workspace’s .vscode/settings.json you can add:

{
  "css.customData": [".vscode/css_custom_data.json"]
}

And then in .vscode/css_custom_data.json add:

{
  "atDirectives": [
    {
      "name": "@tailwind",
      "description": "Use the @tailwind directive to insert Tailwind’s `base`, `components`, `utilities`, and `screens` styles into your CSS.",
      "references": [
        {
          "name": "Tailwind’s “Functions & Directives” documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives/#tailwind"
        }
      ]
    }
  ]
}

Note that you may have to reload the VS Code window for the change to be picked up.

Here is a copy of .vscode/css_custom_data.json, which contains all directives with short usage snippets (which in turn get syntax highlighted in vs code):

{
  "version": 1.1,
  "atDirectives": [
    {
      "name": "@tailwind",
      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
        }
      ]
    },
    {
      "name": "@responsive",
      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
        }
      ]
    },
    {
      "name": "@screen",
      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
        }
      ]
    },
    {
      "name": "@variants",
      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
        }
      ]
    }
  ]
}

Here's a preview of the result:

The only directive missing is @apply, because it's declared at the CSS property level. The CSS Language Service probably doesn't expect atRules at the property level and won't pick up such directives.

This is the at-rule-no-unknown rule provided by Visual Studio Code's built-in list.

In order to get rid of it you need to do the following:

1. Install the Stylelint extension code --install-extension stylelint.vscode-stylelint

2. Install the Stylelint recommended configuration npm install stylelint-config-recommended --save-dev

3. Add these two lines in your Visual Studio Code USER SETTINGS

"css.validate": false, // Disable default CSS built-in lint
"stylelint.enable": true, // Enable Stylelint
"scss.validate": false, // Disable SCSS lint (optional if using scss)

4. Paste these lines into a file called .stylelintrc in your project's root directory; create it if it does not exist.

{
  "extends": "stylelint-config-recommended",
  "rules": {
    "at-rule-no-unknown": [ true, {
      "ignoreAtRules": [
        "extends",
        "tailwind"
      ]
    }],
    "block-no-empty": null,
    "unit-allowed-list": ["em", "rem", "s"]
  }
}

Currently Recommended Visual Studio Code Settings (Updated 2022-12-15)

Official Tailwind CSS IntelliSense Visual Studio Code Documentation

Use the files.associations setting to tell Visual Studio Code to always open .css files in Tailwind CSS mode:

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

Tip: Press Ctrl + , from Visual Studio Code to open Settings; then, type "Files Associations".

By default Visual Studio Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the editor.quickSuggestions setting may improve your experience:

    "editor.quickSuggestions": {
      "strings": true
    }

Combining both, your settings.json file (if new) will look similar to this:

    {
        "files.associations": {
          "*.css": "tailwindcss"
        },
        "editor.quickSuggestions": {
            "strings": true
        }
    }

Source: Tailwind CSS IntelliSense

Previously Recommended Visual Studio Code Settings (Deprecated)

Visual Studio Code has built-in CSS validation which may display errors when using Tailwind CSS-specific syntax, such as @apply. You can disable this with the css.validate setting:

"css.validate": false

The "editor.quickSuggestions" setting recommendation remains the same then and now. Combining both, your settings.json file (if new) would look similar to this:

{
    "css.validate": false,
    "editor.quickSuggestions": {
        "strings": true
      }
}

I am new here but the simplest answer to solve this is to follow these steps:

1. Open the CSS file where you import Tailwind CSS

2. Press Ctrl + Shift + P and search for “change language mode”

3. Inside the search bar, type “tailwindcss” and select it.

4. Now your CSS file is associated with Tailwind CSS instead of regular css and the warnings should be gone.

Credit to : https://batchnepal.com/topic/fix-unknown-at-rule-warning-in-vscode

In this way you won't need to install any third plugins or ignore any error. Make sure to install Official VSCode extension for tailwindcss . Thanks for reading!

1. Just go to settings (Ctrl + , for a shortcut).

2. Search for CSS in the search bar.

3. look for the "CSS > Lint: Unknown At Rules"

4. Select "ignore" from the dropdown options.

This ignores the warning. If you're OK with it.

My recommendation is to install PostCSS language support and then rename tailwind.css to tailwind.pcss. Then change the references in your package.json scripts (or whatever build scripts you are using for tailwind) to tailwind.pcss from tailwind.css and everything should work fine.

The @apply rule is compatible with postCSS: Does @apply in Tailwind conflict with @apply in postcss-cssnext? #325

According to the tailwindcss-intellisense GitHub repository:

Recommended Visual Studio Code Settings

files.associations

Use the files.associations setting to tell Visual Studio Code to always open .css files in Tailwind CSS mode:

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

It fixed the @tailwind warning and added Tailwind CSS directives, functions to intellisense.

More information about the Tailwind CSS intellisense extension can be found in the GitHub repository.

SCSS

If you are using Sass with Tailwind CSS, you will still see errors in your .scss files using these earlier answers to this question.

To properly lint Sass, you can add to your Visual Studio Code settings:

"scss.validate": false,

Follow the instructions by hasusuf, but turn off the default Visual Studio Code validator:

Add these three settings:

"css.validate": false,
"scss.validate": false,
"stylelint.enable": true,

Just add three lines into the settings.json file:

{
  // ....
  "css.lint.unknownAtRules": "ignore",
  "css.validate": true,
  "scss.validate": true,
}

Without touching VS code's global settings, you can fix it with a local setting file for your specific project which you use tailwindcss in. Also you can safely commit this file to your repo so that your team mate's VS code also picks it.

Create a folder named .vscode in your project root (If not existing already) and add a file named settings.json in that.

Paste the following directive in that file (Or if the file already exists, append it to that)

// <project-root>/.vscode/settings.json

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

I edited my .vscode/settings.json file by adding in "css.validate": false, seemed to work for me without installing external libraries.

https://github.com/Microsoft/vscode/issues/14999#issuecomment-258635188

This works for me when dealing with CSS and SCSS. In your settings.json file, add/edit the code below.

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

After many tests:

The PostCSS and STYLUS syntax highlighter remove warnings, but CSS Intellisence is incomplete. It does not show the first-utilities classes Tailwind.

I installed 'language-stylus' plugin, in Visual Studio Code.

Settings> User setting:

"files.associations": {
   "* .css": "stylus"
 },

CSS Intellisence is incomplete

Are your Tailwind rules inside a .scss file (or others stylesheet) files?

Please follow the Tailwind documentation and put the rules inside a .css (not scss or others).

1. Rules are correctly detected?

   • No, go back to Tailwind documentation
   • Yes

2. Do you need to include it in a sccs file or other? Then do the following:

   • In style.scss, remove all Tailwind CSS rules and add the line:

     @import "<path_to_my_tailwind_conf>";
     

   • <my_tailwind_conf>.css:

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

Replace the string inside the angle bracket, <>, with your filename and filepath.

Update 2024 I solved this waring In VSCode Unknown at rule @tailwind by install this extensions " PostCSS Language Support " from the marketplace

Add this Visual Studio Code extension to add the language support.

Adding for future reference

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

This should resolve the issue.

Make sure to install PostCSS language support, an extension found in Visual Studio Code. That will remove the error that is displaying.

The @apply rule is compatible with PostCSS: Does @apply in Tailwind conflict with @apply in postcss-cssnext? #325

VS Marketplace: PostCSS Language Support

Note: uninstall PostCSS intellisense and highlighting extension from Visual Studio Code. Otherwise it will not work.

Today Visual Studio Code is configurable. To get rid of this warning in your Visual Studio Code, you can create a folder named ".vscode" and create a new file called "settings.json". In the settings.json file you can paste this JSON content:

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

1. You most do is to add to setting.json on VScode

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

2. and this will solve your problem with index.css

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

Source Information: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Using Visual Studio Code, open user settings by Ctrl + ,.

Search for Unknown At Rules.

Change Lint from warning to ignore.

I encountered the same problem, and after some troubleshooting, I found a solution that worked for me. If you're facing issues with the @tailwind CSS rule not being recognized by the CSS checker, follow these instructions:

1. Go to settings ( Ctrl + , for a shortcut).

2. Search for CSS in the search bar.

3. Look for the "CSS > Lint: Unknown At Rules".

4. Select "ignore" from the dropdown options.

This should resolve the issue, and the CSS checker should recognize the @tailwind rule without any problems. Remember to save your changes and restart your development server or IDE for the changes to take effect.

Just Install this plugin and it works https://marketplace.visualstudio.com/items?itemName=csstools.postcss

You just need to add these into. Click menu File → Preferences → settings.json

"css.lint.unknownAtRules": "ignore",
"css.validate": true,
"scss.validate": true,

Add this code to settings.json.

we can remove this error by installing the extension PostCSS Language Support from the extensions search panel

Try this if you using VS Code. Find PostCSS Language Support in the extensions marketplace and install it. That may help you.

TailwindCSS IntelliSense - VSCode Extension

These are custom TailwindCSS directives that CSS IDEs don't understand by default. For VSCode, use the official TailwindCSS IntelliSense extension.

As previously suggested, since v3, installing the TailwindCSS IntelliSense VSCode extension and applying additional configuration has been supported and recommended.

• TailwindCSS IntelliSense - VSCode Marketplace

After that, tell VSCode that you want to treat your .css files as TailwindCSS. You can do this in the settings under files.associations like this:

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

• Recommended VSCode settings for TailwindCSS IntelliSense - GitHub

Since these are just IDE error messages, the code will work as expected if you have properly installed TailwindCSS. However, they can be frustrating, so it is definitely recommended to use the extension.

• Tailwind CSS v4 - Unknown at rule @plugin, @custom-variant, @theme in global.css

The TailwindCSS IntelliSense extension remains compatible with both v3 and v4 after the release of v4.

When using v4, an extra tailwind.config.js file is not required, but TailwindCSS must be imported for IntelliSense to automatically detect the installation.

If IntelliSense does not detect it, hints will not work, VSCode will not properly recognize TailwindCSS-specific directives, and it will generate many warnings.

To fix this issue, I have found the following solutions:

TailwindCSS v4

Support and improvements for TailwindCSS v4 are in progress. As of the fix in TailwindCSS Intellisense VSCode extension since February 2025 (v0.14.3), it is possible to specify the new CSS-first configuration as a configuration file.

Due to the proper v4 configuration detection, Intellisense will work the same way as in v3 without any additional settings. It remains compatible with both v3 and v4 versions simultaneously.

• tailwindlabs/tailwindcss-intellisense PR #1167: Clarify how the configFile option works with v4

Tailwind CSS v4.x (CSS entrypoints)

For v4 projects, specify the CSS file(s) that serve as your Tailwind entrypoints.

If your project contains a single CSS entrypoint, set this option to a string:

"tailwindCSS.experimental.configFile": "src/styles/app.css"

For projects with multiple CSS entrypoints, use an object where each key is a file path and each value is a glob pattern (or array of patterns) representing the files it applies to:

"tailwindCSS.experimental.configFile": {
  "packages/a/src/app.css": "packages/a/src/**",
  "packages/b/src/app.css": "packages/b/src/**"
}

Additionally, it no longer displays an error message if the configuration file is missing in v4.

• VSCode Tailwind CSS Intellisense autocompletion and suggestions not working after installing Tailwind v4

If the Tailwind CSS is not working as well as the error caused by the unknown rule, you need to build it again. For example, if you have been running npm run dev in a local environment, you can exit with Ctrl + C and run npm run dev again to create a normal pure CSS file, which will enable tailwind CSS to work.

This is exactly the problem I was stuck with and how I was able to solve it.

Just go to settings (Ctrl + ,) for shortcut.

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

Change that to ignore:

Done!

Still don’t understand? Follow the pictures: