vscodeでtailwindcssを使っているとき、@applyを使うと下のようなerrorが表示される場合があります。
その場合の解決策です。
このエラーはTailwindの書き方が間違っているのではなく、VS Code標準のCSS検証が@applyや@tailwindを知らないために出る警告です。ビルドや表示には影響しません。現在は、Tailwind公式が推奨する拡張機能Tailwind CSS IntelliSenseを入れるのが一番確実です。Tailwind専用のCSS言語モードが付属しており、@applyを含む独自の@ルールをすべて認識します。
vscodeでtailwindの@applyを使う出るerrorの解決策
Tailwind CSS IntelliSenseを入れる（現在の推奨）
VS Codeの拡張機能で「Tailwind CSS IntelliSense」をインストールします。入れても警告が残る場合は、CSSファイルをTailwindの言語モードとして扱うように、settings.jsonへ次を追加します。
{
"files.associations": {
"*.css": "tailwindcss"
}
}クラス名の補完やホバーでのCSS表示も付くので、Tailwindを使うなら入れておいて損はありません。
PostCSS Language Supportを入れる（この記事を書いた当時の方法）
vscodeにPostCSS Language Supportをインストールすると解決します。
Github上で提示されていた解決策です。
他にもvscodeのデフォルトのcssバリデートを使わないような”css.validate”: falseを設定する方法もあるようですが、その場合他にバリデートできるように対処する必要があります。
上で紹介した2つの拡張機能はどちらもインストールするだけで解決するので、時間をかけたくない場合の最適解です。
Vueでtailwindcssを使う際の関連記事として、【Vue】tailwindcssでSVGアイコンを使う方法も参考にしてください。