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

Question

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?

Answer 1

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:

   

2. Add the following to file .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 Visual Studio Code

Results:

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