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

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)

VS Code Screenshote

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.

cssvue.jstailwind-css


Solution 1:[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
    }
}

Solution 2:[2]

I had the same case, I went to vs code settings, searched for Unknown At Rules and select ignore there.

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dhaifallah
Solution 2 Muhammad Gata

Related Questions