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?

Korn

What's the error? This might help – Kilian

stylelint from shinnosuke watanabe is no longer available on vscode extensions. – Scan

@Scan 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 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. – Korn

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.

Wordbook

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! – Korn

You're welcome. Yes, you can modify the stylelint.config.js file rules as you see fit. Here is an example 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; – Wordbook

why does this happen? is it a bug with vscode? – Unconsidered

Answer 2

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

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.

Dave

This is actually the best solution, because turning off the whole scss linting is not a good idea,. – Foeticide

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

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

   {
     "css.validate": false
   }
   

Results:

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

Wordbook

Worked like a charm! – Breeks

Answer 4

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

Atavism

Edit: I found a solution to my issue here: codeconcisely.com/posts/tailwind-css-unknown-at-rules I don't see Tailwind CSS in my settings. Are you using Taliwind CSS extension? I am getting Unknown at rule @tailwind error in VS Code in my Next.js project installed with @latest together with TS, EsLint and Tailwind. – Crosseye

Answer 5

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

"scss.lint.unknownAtRules": "ignore"

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

Inglorious

Answer 6

My case was a bit different, but I guess it may help. I was getting a below error in my Next.js setup with Tailwind:

Unknown at rule @tailwind

in global.css including only initial Tailwind setup:

@tailwind base;
@tailwind components;
@tailwind utilities;

Some of the solutions provided here were adding extra complexity which in the end didn't help solve the problem.

What worked for me was associating the file with Tailwind CSS by installing Tailwind CSS IntelliSense Plugin for VS Code and than changing language mode for the file.

I provide an article that help me solve the problem: https://www.codeconcisely.com/posts/tailwind-css-unknown-at-rules/#installing-tailwind-css-intellisense-plugin

Burney

Answer 7

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.

Chevy