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

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.

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

1. VS Code -> Command Palette -> Workspace Settings -> Search for: CSS Unknown At Rules
2. Set to ignore

VS 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.