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

[rowild]

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!

[typehorror]

checkout #2486

[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?

[rowild]

@adamwathan Is this documented somewhere? Do you happen to have a link, please, instead of just closing the issue?

[adamwathan]

I closed it because you found the solution, the answer was in the other discussion thread that was linked 👍🏻

[rowild]

Yes, but don't you think that needs to be in the official documentation somewhere? Digging through github issues is not very helpful, especially when the issues are closed... contradicts the "lightness" of the general tailwind idea..

[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]

No need to come up with the whole OpenSource blabla again, please.

I understand the point of not wanting to support all the editor. Haven't thought of that and totally agree.
If you had mentioned that right away instead of just cutting off an open question, that would have been friendlier. Because - don't forget: on the other hand you also ask the community to contribute. (That's the other side of the OpenSource blabla...)

So thanks for clarifying and have a good day.