Tailwind CSSのunknownAtRulesエラーの解消法（VSCode利用時）

事象

Next.jsプロジェクトでTailwind CSSを利用する際に、globals.cssに以下のコードを記述すると、unknownAtRulesの警告が表示されることがあります。この警告は、Tailwind CSSのディレクティブがVisual Studio Codeによって未知のルールとして扱われるために発生します。この記事では、その警告を解消する方法を紹介します。

src/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

添付のスクリーンショットでは、「@tailwind」や「@apply」のルールが警告の対象となっています。

対処法

方法1: Tailwind CSS IntelliSenseのインストール

1. Tailwind CSS IntelliSense をVisual Studio Codeの拡張機能としてインストールします。この拡張機能は、Tailwind CSSに関連するコードをより正確に認識し、エディタの補助機能を提供します。

2. Visual Studio Codeの設定ファイル（settings.json）に以下の設定を追加します。この設定により、CSSファイルがTailwind CSSとして適切に解釈され、警告が減少します。

.vscode/settings.json

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

方法2: 警告の無視

1. もし警告が機能的な問題を引き起こさない場合は、Visual Studio Codeの設定ファイル（settings.json）に以下の設定を追加して、これらの警告を無視することもできます。

.vscode/settings.json

{
  "css.lint.unknownAtRules": "ignore"
}

自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！
また、なにか間違ってましたらご指摘いただけますと幸いです！