Search code examples
csssasstailwind-css

Unexpected unknown at-rule "@tailwind" scss/at-rule-no-unknown


This is my stylelint.config.js,

module.exports = {
  extends: ['stylelint-config-standard-scss'],
  rules: {
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: ['tailwind']
      }
    ],
    'declaration-block-trailing-semicolon': null,
    'scss/at-extend-no-missing-placeholder': null,
    'color-function-notation': 'legacy',
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['deep']
      }
    ]
  }
}

And when I run stylelint "**/*.{scss,css,sass,svelte}", I get the following error:

yarn run v1.22.17
$ stylelint "**/*.{scss,css,sass,svelte}"

src/css/app.scss
 1:1  ✖  Unexpected unknown at-rule "@tailwind"  scss/at-rule-no-unknown
 2:1  ✖  Unexpected unknown at-rule "@tailwind"  scss/at-rule-no-unknown
 3:1  ✖  Unexpected unknown at-rule "@tailwind"  scss/at-rule-no-unknown

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This is my css file,

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

Solution

  • This should be:

    rules: {
        "at-rule-no-unknown": null,
        "scss/at-rule-no-unknown": [
            true,
            {
                "ignoreAtRules": ["tailwind"]
            }
        ],
    }
    

    'scss/at-rule-no-unknown' dissalows unknown at-rules. Should be used instead of Stylelint's at-rule-no-unknown.

    Source