I want to associate TailwindCSS syntax interpretation with .vue (or Svelter / Astro) files so that the VSCode doesn't show errors for TailwindCSS directives in the <style> section, which would otherwise work.
<template>
...
</template>
<style scoped>
.my-element {
@apply bg-red-500; /* Warning */
/\
}
</style>
css(unknownAtRules): Unknown at rule @apply
I don't want to disable error reporting. It's quite frustrating that I have to disable a useful feature just because I want to use two different interpreters in one extension, in this case, vue and tailwindcss.
I can't add the support to files.associations because I primarily want to treat .vue files as Vue interpretation. The interpretation of TailwindCSS directives is secondary.
I'm not interested in other workaround solutions, such as lang='postcss', because that allows anything and doesn't provide hints for the individual directives.
I am using the TailwindCSS IntelliSense extension. Given its version, I don't expect 100% error-free functionality. I found a tailwindCSS.includeLanguages setting in its documentation. I understand correctly (?) that with this, I can identify different file extensions as HTML, CSS, or JavaScript, so I can give a secondary association to the TailwindCSS extension for specific files?
"tailwindCSS.includeLanguages": {
"vue": "html",
},
For me, the warning still persists with this setting. If I am misunderstanding it, how can I make the TailwindCSS IntelliSense treat the Vue (or Svelte / Astro) file as HTML?
By using the official TailwindCSS IntelliSense extension and setting the lang attribute to tailwindcss, the error messages disappear and hints appear while typing.
You don't even need to identify the Vue file as HTML for this to work.
<template>
...
</template>
<style lang="tailwindcss" scoped>
.my-element {
@apply bg-red-500;
}
</style>
Note: I'm not convinced about when the modification was introduced.