How to make vscode recognize Tailwind's @apply?

Question

I am writing a Vuejs + Tailwindcss in pure CSS mode and everything works fine (i.e. the app works as expected from the code).

Since I use vscode I configured it according to the Tailwindcss recommendations and I have Intellisense working fine.

One thing that is an eyesore is that directives are highlighted by vscode as Unknown at rule @tailwind

Same with @apply (the Tailwind @apply, not the abandoned CSS one).

Is there a way to fix this?

---

Note: a previous question mentioned this issue but it was using Sass and the recommendation was to use pure CSS, which is my case.

Answer 1

As per the README, there is a Tailwind CSS language mode:

Tailwind CSS Language Mode

An alternative to VS Code's built-in CSS language mode which maintains full CSS IntelliSense support even when using Tailwind-specific at-rules. Syntax definitions are also provided so that Tailwind-specific syntax is highlighted correctly in all CSS contexts.

Which can be enabled in your VSCode settings as per the the README:

Use the files.associations setting to tell VS Code to always open .css files in Tailwind CSS mode:

"files.associations": {
  "*.css": "tailwindcss"
}

You should also apply a lang="postcss" in your component <style> definition:

<style lang="postcss">
</style>