How to add a @tailwind CSS rule to css checker

Tailwind adds @tailwind css at rule which is flagged as unknown. How can I avoid this error?

eg styles.css

@tailwind preflight;

@tailwind utilities;

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

Make sure you associate your scss files with PostCSS.

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 vscode's built-in list.

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

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

2. Install stylelint recommended config npm install stylelint-config-recommended --save-dev

3. Add these two lines in your vscode USER SETTINGS

"css.validate": false, // Disable css built-in lint
"stylelint.enable": true, // Enable sytlelint
"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"]
  }
}

1. Just go to settings (ctrl + ,) for 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.
That's all

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.

@apply rule is compatible with postCSS: https://github.com/tailwindcss/tailwindcss/issues/325

> SCSS

If you are using SASS with Tailwind, 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 VS Code settings:

"scss.validate": false,

Follow the instructions by @hasusuf but turn off the default VS Code validator:

Add these 3 settings:

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

Recommended VS Code Settings

Official Tailwind CSS IntelliSense VS Documentation

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

"css.validate": false

By default VS 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:

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

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

just add three line into settings.json file

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

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

After many tests: POSTCSS and STYLUS syntax highlighter, removes warnings but CSS Intellisence is incomplete, does not show the first-utitilies classes Tailwind

I installed 'language-stylus' plugin, in VSCode

Settings> User setting:

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

See you later!

CSS Intellisence is incomplete

Add the VSCode extension

to add the language support

You just need to add theses into

• click file > preferences > setting.json

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

add those code at setting.json

enter image description here For Vue 3, maybe you try to install Vue 3 Support extentions

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.