32

Linting error

I'm using Tailwind in a Gatsby project. My environment is Visual Studio Code, using the Prettier code formatter.

How do I get rid of these linting error alerts?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Sandy Wyper
  • 457
  • 1
  • 4
  • 10
  • What's the error? [This](https://www.meidev.co/blog/visual-studio-code-css-linting-with-tailwind/) might help – Mosh Feu Jun 07 '20 at 09:53
  • 1
    **stylelint** from **shinnosuke watanabe** is no longer available on vscode extensions. – Digvijay Jun 07 '20 at 11:26
  • @Digvijay after a bit of digging all i can find is ...edit your settings.json file (you can do it per project by putting this file in you project root) `.vscode/settings.json`. Then put in `{ "scss.validate": false}` you also lose all other error detection. [This](https://stackoverflow.com/questions/47607602/how-to-add-a-tailwind-css-rule-to-css-checker#answer-61333686) answer gets rid of error highlighting on some of tailwinds directives, but not all, and not class names that are listed one after another like I do after using @apply. – Sandy Wyper Jun 07 '20 at 17:15

6 Answers6

49

Solution for both .css and .scss

  1. At the root level of your project, update or create a directory, .vscode, with a file, settings.json:

    Enter image description here

  2. Add the following to file .vscode/settings.json:

    {
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false
}

  3. Install the vscode-stylelint extension

    Enter image description here

  4. Install stylelint-config-standard:

    npm i stylelint-config-standard -D

  5. Create a stylelint.config.js file at the root level and add:

    module.exports = {
  extends: ['stylelint-config-recommended'],
  rules: {
    "at-rule-no-unknown": [
      true,
      {
        ignoreAtRules: [
          "tailwind",
          "apply",
          "variants",
          "responsive",
          "screen",
        ],
      },
    ],
    "declaration-block-trailing-semicolon": null,
    "no-descending-specificity": null,
  },
};

  6. Restart Visual Studio Code

Results:

You get rid of these Sass linting errors when using Tailwind CSS and keep doing CSS validation with Stylelint.

Enter image description here

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
ArtiomLK
  • 2,120
  • 20
  • 24
  • Great! This works fabulously for me. I added "extend" to the ignoreAtRules array. I added a polyfill for '.container' because when using tailwind in SCSS doesn't allow you to @apply some responsive classes. Please correct me if I'm doing this wrong. Once again though, thanks for this! – Sandy Wyper Jun 08 '20 at 09:03
  • You're welcome. Yes, you can modify the `stylelint.config.js` file [rules](https://stylelint.io/user-guide/rules/list) as you see fit. Here is an [example](https://github.com/stylelint/stylelint-config-standard#extending-the-config) with `extend` as you mentioned. From the example, just notice that without `ignoreAtRules["tailwind"...]` you will get `Unexpected unknown at-rule "@tailwind"` when configuring Tailwind, e.g. `@tailwind base;` – ArtiomLK Jun 08 '20 at 22:19
  • 1
    why does this happen? is it a bug with vscode? – glend Mar 18 '21 at 12:39
7

You can tell Visual Studio Code's CSS linter to ignore "Unknown At Rules" (like @tailwind). This will leave the rest of your CSS validation intact:

  1. Visual Studio Code → Command Palette (e.g., menu View → Command Palette)* → Workspace Settings → Search for: CSS Unknown At Rules
  2. Set to ignore

Enter image description here

Visual Studio Code can also whitelist specific CSS properties with "CSS > Lint: Valid Properties", but it doesn't look like whitelisting specific 'at rules' is supported yet.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Freewalker
  • 6,329
  • 4
  • 51
  • 70
  • This is actually the best solution, because turning off the whole scss linting is not a good idea,. – Picard Dec 22 '21 at 09:37
3

Quick solution for both .css and .scss (not recommended)

  1. At the root level of your project, update or create a directory, .vscode, with a file, settings.json:

    Enter image description here

  2. Add the following to file .vscode/settings.json:

    {
  "css.validate": false
}

    Enter image description here

Results:

You get rid of these SASS linting errors when using Tailwind CSS, but you disable CSS validation.

Enter image description here

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
ArtiomLK
  • 2,120
  • 20
  • 24
2

Add this one-line fix in VSCode's settings.json

"scss.lint.unknownAtRules": "ignore"

This way you don't have to disable CSS validation.

mufidu
  • 169
  • 1
  • 6
2

Enter image description here

The other answers are thermonuclear. Even Confucius stopped with a canon...

This is the one that did it for me.

To reproduce: Settings → search for "invalid Tailwind directive", and update the value for this rule to "ignore". voilà.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
PaulIsLoud
  • 654
  • 7
  • 22
-2

If you are using Visual Studio Code then you can add support for modern and experimental CSS within Visual Studio Code by installing the plugin PostCSS Language Support to fix the error while using Tailwind CSS directives.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Prince Sumberia
  • 37
  • 6