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

Question

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?

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