cssvisual-studio-codeconfigurationtailwind-css

How to make vscode recognize Tailwind's @apply?

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

"Unknown at rule @tailwind" warning in vscode

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.

Solution

  • 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>