"Unknown at rule @apply" warning in Vue SFC style section

[deisner]

What version of VS Code are you using?

v1.90.2

What version of Tailwind CSS IntelliSense are you using?

v0.12.1

What version of Tailwind CSS are you using?

v3.4.4

What package manager are you using?

npm

What operating system are you using?

macOS

Tailwind config

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

VS Code settings

{}

Reproduction URL https://github.com/deisner/tailwind-css-intellisense-atrule-mre

Describe your issue

I'm getting an Unknown at rule @apply css(unknownAtRules) warning in the style section of my Vue3 SFC:

Note that the tailwind style is being applied, and intellisense is otherwise working, as you can see with the text-orange-... suggestions.

Also, when I commited my chages (or pushed the changes, can't recall), the warning went away. But when I reload the window, it reappears. Maybe there's a race condition?

Thanks for your help!

[Archetipo95]

In case you just want to mute the error try with these 2 lines in the vscode settings (global or per project)

  "scss.lint.unknownAtRules": "ignore",
  "css.lint.unknownAtRules": "ignore",

[thecrypticace]

As far as I know there's nothing we can do to address this. This is because Vue SFCs treat <style> blocks as the css language in VSCode rather than the tailwindcss language and afaik there is no setting to change that. You can only do so for certain file extensions — e.g. .css.

You can however say <style scoped lang="postcss"> if the PostCSS plugin is installed in VSCode. Unfortunately this causes problems with syntax highlighting but I'm not certain how to fix that.

So, unfortunately it's not something we can fix ourselves and it's probably best to just disable those lint rules for now as @Archetipo95 mentioned above.