How to use sass interpolation inside Tailwind css @apply directive?

Question

I'm trying to use sass interpolation inside a tailwind apply directive (see example below).
According to VSCode the syntax below is incorrect (at-rule or selector expectedscss(css-ruleorselectorexpected)).
However postcss outputs the built css without any errors.

$colorTypes: "primary", "success", "warning", "danger";

@each $colorType in $colorTypes {
  .card-#{$colorType} {
    @apply bg-#{$colorType};
  }
}

Is this a VSCode error?
Is there any way to fix it?
Is there an other to way have variables inside an apply statement?

Screenshot:

tailwind.config.js:

module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
    colors: {
      primary: "#111111",
      success: "#222222",
      warning: "#333333",
      danger: "#444444",
    },
  },
  plugins: [],
};

Answer 1

It is a VSCode error with the built-in Sass syntax interpreter not quite understanding @apply, since that at-rule is Tailwind specific. You can safely ignore the error or turn the error off in VSCode settings.