Sass variable interpolation broken in an unknown at rule value

[MrSquaare]

When using variable interpolation in an unknown at rule value, the sass linter reports false errors and the syntax is broken

Example:

$base: "black";

.text-base {
  @apply text-#{$base};
}

[praveenpuglia]

I don't think @apply is a valid SCSS or CSS at-rule. It was once proposed but later abandoned for css. Can you tell me where you are getting this from?

[MrSquaare]

@apply is an at-rule added by Tailwind CSS; it is not a standard CSS or SCSS at-rule
Today it is possible to ignore unknown at-rule via the unknownAtRules parameter, but the lint remains broken when using interpolation

[orimay]

Any update on this?

[phatpcdev]

Hi guys,

You can try this approach:

1. Create a file with the name tailwind.json in .vscode folder.
2. Then, pass this JSON format below into tailwind.json file to tell vscode to be aware of the tailwind CSS at-rule. This is just a sample for @apply directive, you can do the same thing on another tailwind directive.

{
  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-css-languageservice/main/docs/customData.schema.json",
  "version": 1.1,
  "atDirectives": [
    {
      "name": "@apply",
      "description": "Use `@apply` to inline any existing utility classes into your own custom CSS.",
      "references": [
        {
          "name": "Tailwind Directives",
          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
        }
      ]
    }
  ]
}

3. In .vscode/settings.json file, add more line:

{
...,
"css.customData": [".vscode/tailwind.json"]
...,
}

4. Now, enjoy your coding time ;)