How to fix the error: at-rule or selector expectedscss(css-ruleorselectorexpected) in VSCode

Question

I am trying to use TailwindCSS combined with SCSS but VSCode always give me an error message when i openning this file, how can i fix it?

image for this error

my config in postcss file:

module.exports = {
    plugins: {
        'postcss-import': {},
        'tailwindcss/nesting': {},
        tailwindcss: {},
        autoprefixer: {},
    },
};

my config in VSCode settings.json:

{
    ...
    "css.lint.unknownAtRules": "ignore",
    "css.lint.emptyRules": "ignore",
    "scss.lint.unknownAtRules": "ignore",
    "scss.lint.emptyRules": "ignore"
}

I found the cause of the error is #{!important} in .scss file

Hrvatska

fixed this problem by "scss.validate": false in settings.json of .vscode – Hrvatska

You did not fix it. You just muted a linter. Faced the same and looking for solution – Integrator

Answer 1

Try to add this to user settings.json

"files.associations": {
  "*.scss": "tailwindcss",
  "*.css": "tailwindcss"
},

Birthday

Did that, still facing the same issue – Maidenhead

And again, this rule doesn't work correctly for tw in scss files. Therefore, you just need to add each rule as pure scss h2 { font-size: 24px !important;} – Birthday

i want to use @ apply though. – Maidenhead