How to add a @tailwind CSS rule to CSS checker

Question

Tailwind CSS adds a @tailwind CSS at rule which is flagged as unknown.

How can I avoid this error?

For example, styles.css

@tailwind preflight;

@tailwind utilities;

Answer 1

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" }.

Answer 2

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.

Answer 3

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. More information about Stylelint's configuration follow this link: https://stylelint.io/user-guide/

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

Answer 4

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.

Answer 5

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
      }
}

Answer 6

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

Answer 7

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.

Answer 8

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://www.codeconcisely.com/posts/tailwind-css-unknown-at-rules/

In this way you dont need to install any third plugins or ignore any error. Thanks for reading!

Answer 9

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,

Answer 10

Just add three lines into the settings.json file:

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

Answer 11

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

Answer 12

After many tests:

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

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

Settings> User setting:

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

CSS Intellisence is incomplete

Answer 13

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"
}

Answer 14

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

Answer 15

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.

Answer 16

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"
}

Answer 17

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

Search for Unknown At Rules.

Change Lint from warning to ignore.

Answer 18

Is your tailwind rules inside a scss (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. You need to include it in a sccs file or other? 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 angular bracket <> with your filename and filepath.

Answer 19

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.

Answer 20

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:

Answer 21

Adding for future reference

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

This should resolve the issue.

Answer 22

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

Answer 23

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.