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 } }

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

Make sure you have csstools.postcss extension installed in the VScode before starting debugging the issue as other answers suggested.

Solution proposed in https://github.com/tailwindlabs/tailwindcss/discussions/5258#discussioncomment-1979394 Copy pasting here to follow StackOverflow Guidelines. Create .vscode at the root of your project with the two files named settings.json tailwind.json Update the settings.json file { "css.customData": [".vscode/tailwind.json"] } Update the tailwind.json file { "version": 1.1, "atDirectives": [ { "name": "@tailwind", "description": "Use the `@tailwind` directive to insert Tailwind s `base`, `components`, `utilities` and `screens` styles into your CSS.", "references": [ { "name": "Tailwind Documentation", "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind" } ] }, { "name": "@apply", "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.", "references": [ { "name": "Tailwind Documentation", "url": "https://tailwindcss.com/docs/functions-and-directives#apply" } ] }, { "name": "@responsive", "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive: ```css @responsive { .alert { background-color: #E53E3E; } } ``` ", "references": [ { "name": "Tailwind Documentation", "url": "https://tailwindcss.com/docs/functions-and-directives#responsive" } ] }, { "name": "@screen", "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS: ```css @screen sm { /* ... */ } ``` …gets transformed into this: ```css @media (min-width: 640px) { /* ... */ } ``` ", "references": [ { "name": "Tailwind Documentation", "url": "https://tailwindcss.com/docs/functions-and-directives#screen" } ] }, { "name": "@variants", "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive: ```css @variants hover, focus { .btn-brand { background-color: #3182CE; } } ``` ", "references": [ { "name": "Tailwind Documentation", "url": "https://tailwindcss.com/docs/functions-and-directives#variants" } ] } ] } Credits: Article by Duncan Leung @SeyyedKhandon

Adding lang="scss" worked for me: