In a CSS file in a class, @apply shows error in VSCode Vue 2 project, when more then 1 tailwind class is assigned

Describe the problem:

In a css file, a class is assigned tailwind styles using @apply:

.new-activity-show {
  @apply h-80 mt-8;
}

This causes VSCode to put wiggley lines under the 2 classes and signal problems:

semi-colon expected { “resource”: “/[path]/components/NewActivity.vue”, “owner”: “generated_diagnostic_collection_name#2”, “code”: “css-semicolonexpected”, “severity”: 8, “message”: “semi-colon expected”, “source”: “css”, “startLineNumber”: 371, “startColumn”: 15, “endLineNumber”: 371, “endColumn”: 19 }

at-rule or selector expected { “resource”: “/[path]/components/NewActivity.vue”, “owner”: “generated_diagnostic_collection_name#2”, “code”: “css-ruleorselectorexpected”, “severity”: 8, “message”: “at-rule or selector expected”, “source”: “css”, “startLineNumber”: 372, “startColumn”: 1, “endLineNumber”: 372, “endColumn”: 2

}

Tailwind Intellisense is installed, which I expected to handle tailwind lasses in Vue. Maybe I am wrong on this assumption? Uninstalling it does not change anything.

I would expect that there are no error messages shown.

Link to a minimal reproduction:

Please try in VScode, because this cannot be show-cased on the playground or somewhere else. A screenshot is included.

Thank you!

[adamwathan]

Leaving an issue open when it is resolved doesn’t really make much sense to me, they show up in Google whether open or closed. This also isn’t a bug in the Tailwind CSS codebase itself, so really it belongs in our discussion forum as a “help” topic.

Tailwind can be used with any text editor not just VS Code, so if we started documenting that sort of thing in the Tailwind docs it would quickly grow out of control as we added instructions for VS Code, Atom, Nova, Sublime, Webstorm, etc. I’d be happy to look at a PR for the docs repo if someone wanted to contribute docs for this that were high quality and logically organized but to me this is ultimately more of a VS Code question than a Tailwind question.

For what it’s worth I think it’s important that we normalize closing issues without the ceremony of having to provide a thoughtful response, especially when the answer to the question is already in the issue. Maintaining open-source is a tremendous amount of work and being expected to provide in-depth responses to every single issue that is opened is essentially a DDOS vector for a maintainer’s life 😕 The only way to stay on top of this stuff is to process things very mechanically without having to spend the emotional energy trying to navigate unrealistic social expectations. It’s not personal, it’s just the only way to even have a chance at keeping issues and PRs under control at all.

[rowild]

Thank you, @debrice !

For others: Install the postcss extension for VSCode Add "lang=“postcss” to the style tag in a vue file.

Haven’t found any docu on that, not even on the tailwind page itself! I feel ashamed about my poor search capabilities… but maybe somebody can point out a source?