duplicate "Unknown at rule @apply css(unknownAtRules)" errors in Vue.js project

Question

I'm working on a project using Vue.js and Tailwind CSS and I get this error twice for the same line of code

Unknown at rule @apply css(unknownAtRules)

when using the follwing style

<style scoped>
     #home {
       @apply bg-accent-gradient;
     }
</style>

I found a soultion to add PostCSS Language Support Extensions and the following to my vscode settings

"css.lint.unknownAtRules": "ignore"

I added it but it removed one error only not both.

Answer 1

1- First Install VS Code plugin stylelint

2- Then disable css and scss validation for the project. (ctrl+shift+p) and search "settings json".

"scss.validate": false
"css.validate": false

3- Create stylelint plugin config file in your project root stylelint.config.js

4- Add the following content to it in order to ignore at rules apply, tailwind,etc:

module.exports = {
    rules: {
        'at-rule-no-unknown': [
            true,
            {
                ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen']
            }
        ],
        'declaration-block-trailing-semicolon': null,
        'no-descending-specificity': null
    }
}