How to add a @tailwind CSS rule to css checker

Question

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

eg styles.css

@tailwind prefligh

Answer 1

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 2

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

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-whitelist": ["em", "rem", "s"]
  }
}

Answer 3

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

Answer 4

If you use VS Code you can use the following plugin: https://marketplace.visualstudio.com/items?itemName=csstools.postcss

Answer 5

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 will 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 6

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,