Adding TailwindCSS association to Vue/Svelte/Astro file to disable "css(unknownAtRules): Unknown at rule @apply"

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?

Although the question itself is interesting as to why VSCode can't be forced to do this, while the code itself runs perfectly with Vue (or Svelte / Astro) + TailwindCSS, using TailwindCSS features inside styles in various Vue (or Svelte / Astro) files might be convenient for hobby projects or projects with a few components.

However, this results in more separatelly run for each , which makes things less efficient. Therefore, it's better to consider @adamwathan's suggestions and look for alternatives, avoiding the use of TailwindCSS features inside <style> in Vue (or Svelte / Astro) and other files.

<template>
...
</template>

<style scoped>
.my-element {
  background-color: var(--bg-red-500);
}
</style>

Since you avoid using it primarily for performance reasons, the issue raised in the question is no longer relevant.

A ton of confusion amongst Tailwind users comes from not realizing that if you are using CSS modules, or blocks in Vue/Svelte/Astro, your CSS pipeline separately for every single one of those blocks.

50 Vue components using means Tailwind runs 50 separate times.

---

Source: @adamwathan

For the best build performance, don't use Tailwind features in CSS modules or Vue/Svelte/Astro blocks, just rely on CSS variables.

<template>
  <div>
    <h1>Hello world!</h1>
    <p>Lorem ipsum dolor sit amet ...</p>
  </div>
</template>

<style>
  div {
    background-color: var(--color-blue-500);
  }
  h1 {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
    font-weight: var(--font-weight-bold);
    margin-bottom: calc(2 * var(--spacing));
  }
</style>

---

Source: @adamwathan

Or even better, just use the classes in your markup like you're supposed to

<template>
  <div class="bg-blue-500">
    <h1 class="mb-2 text-3xl font-bold">Hello world!</h1>
    <p>Lorem ipsum dolor sit amet ...</p>
  </div>
</template>

---

Source: @adamwathan

The same thing happens by the way by just importing multiple CSS files in JS. Don't do that — import them all into one CSS file and load that one file in JS instead.

---

Source: @adamwathan

And:

That's the point of Tailwind - to style your elements on your elements, not in a CSS file.

@apply is a stopgap and shouldn't be used more than once or twice per project.

---

Source: Moni