How do you get rid of these SASS linting errors when using Tailwind-CSS?

问题

I'm using Tailwind in a Gatsby.js project. My environment is VSCode, using Prettier code formatter.

How do I get rid of these linting error alerts?

回答1:

Solution for both .css and .scss

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

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

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

3. Install the vscode-stylelint extension

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 vsCode

Results:

You get rid of these SASS linting errors when using Tailwind-CSS and keep doing css validation with stylelint.

回答2:

You have to get a code formatter for VSCode to solve it.

I recommend you to download Beautify available on this link.

回答3:

Quick Solution for both .css and .scss (NOT RECOMMENDED)

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

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

{
  "css.validate": false
}

Results:

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

来源：https://stackoverflow.com/questions/62118325/how-do-you-get-rid-of-these-sass-linting-errors-when-using-tailwind-css