CODEWITHSUNDEEP
cssvisual-studio-codesassprettiertailwind-css
Sandy Wyper
Sandy Wyper

Reputation: 457

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

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?

Upvotes: 32

Views: 16054

Answers (7)

Piotr Szcześniak
Piotr Szcześniak

Reputation: 67

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

Upvotes: 0

PaulIsLoud
PaulIsLoud

Reputation: 694

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

Upvotes: 3

ArtiomLK
ArtiomLK

Reputation: 2260

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

Upvotes: 3

Freewalker
Freewalker

Reputation: 7335

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.

Upvotes: 9

Prince Sumberia
Prince Sumberia

Reputation: 37

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.

Upvotes: -2

ArtiomLK
ArtiomLK

Reputation: 2260

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

Upvotes: 50

mufidu
mufidu

Reputation: 339

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

"scss.lint.unknownAtRules": "ignore"

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

Upvotes: 2

Related Questions