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

I want to associate TailwindCSS syntax interpretation with .vue 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 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 + TailwindCSS, using TailwindCSS features inside styles in various Vue 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 in Vue 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