32

Linting error

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?

Improve this question
3
  • What's the error? This might help Commented Jun 7, 2020 at 9:53
  • 1
    stylelint from shinnosuke watanabe is no longer available on vscode extensions. Commented Jun 7, 2020 at 11:26
  • @Digvijay 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. Commented Jun 7, 2020 at 17:15

7 Answers 7

Reset to default
52
+50

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:

    Enter image description here

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

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

  3. Install the vscode-stylelint extension

    Enter image description here

  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.

Enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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!
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;
why does this happen? is it a bug with vscode?
9

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

Enter image description here

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.

Improve this answer

1 Comment

This is actually the best solution, because turning off the whole scss linting is not a good idea,.
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:

    Enter image description here

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

    {
  "css.validate": false
}

    Enter image description here

Results:

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

Enter image description here

Improve this answer

1 Comment

Worked like a charm!
3

Enter image description here

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

Improve this answer

1 Comment

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

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

"scss.lint.unknownAtRules": "ignore"

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

Improve this answer

Comments

0

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

Improve this answer

Comments

-2

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.