VS Code giving warnings when using nested styles

[sharathdaniel]

Hi,

I've setup tailwind in Angular with scss, but when writing nested styles, i'm getting these warnings:

Below is the code:

Here is my postcss.config.js

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

This is how i'm importing the styles:

This is my folder structure for scss files:

main.scss is the entry point for styles.

Am i doing this entirely wrong or does it need more setup? Even with the warnings the styles are getting applied somehow.

[wongjn]

If the styles are still getting applied then you're fine. The warnings are from VSCode's Sass syntax checker and it seems like it does not understand @apply syntax.

[sharathdaniel]

Even without @apply its showing these warnings.

[wongjn]

I took a closer look. It seems like you have configured Tailwind CSS Intellisense for this Sass file, but it does not understand the nesting syntax of Sass/Scss.

[sharathdaniel]

But intellisense is needed, so what are my options?

[wongjn]

You could consider not using Scss syntax.