Phpstorm v2017.3 : Unknown CSS at-rule - Not using .stylelintrc file

[TheFrankman]

This is my .stylelintrc which is sat in the project root

{
  "extends": "stylelint-config-recommended",
  "rules": {
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": [
          "extend",
          "extends",
          "tailwind"
        ]
      }
    ],
    "block-no-empty": null
  }
}

In my css the following is getting highlighted as an error by stylelint @tailwind utilities;

The error is Unknown CSS at-rule

This should be being ignored by stylelint.

My configuration is

Node Interpreter : /user/local/bin/node Stylelint package : /usr/local/lib/node_modules/stylelint

Am i missing some configuration that tells the IDE / stylelint where to locate the .stylelintrc

[TheFrankman]

I have upgraded PHPstorm to v2018.1 and the issue persists.

[niutech]

PHPStorm supports Stylelint natively, have you tried it?

[TheFrankman]

@niutech Yes I have tried using File Watchers, even using the documentation you linked. It had the same issue which is why I came to use this repository.

[terryupton]

@thefrankman did you solve this? I’m trying to setup and have the same issue.

[adrienrobertskoove]

Still having this problem, any way to add @ rules manualy or change the linter ?

[terryupton]

Anyone managed to solve this at all? I have just come back to see if I can get this working again. cc @TheFrankman @adrienrobertskoove

[terryupton]

For anyone else, I believe this is down to PHPStorm running it's own inspection rules. It should be as straight forward as disabling these warnings in the PHPstorm Settings > Editor > Inspection

See below:

unticking the 'Unknown CSS at-rule' has removed these warnings/highlights.

[adrienrobertskoove]

@terryupton No so far I just left them there. I'm afraid of disabling the whole @ rules as there's more than one and might pass on real errors. @import is not trigerring the linter but @screen, @apply does

[MvnTruong]

You can suppress this on a per-line basis with /*noinspection CssInvalidAtRule*/, so the top of your Tailwind's main.css file would look like this:

/*noinspection CssInvalidAtRule*/
@tailwind base;

/*noinspection CssInvalidAtRule*/
@tailwind components;

/*noinspection CssInvalidAtRule*/
@tailwind utilities;