Tailwind CSSエラー: 「Unknown at rule @tailwind」の解決方法

問題の説明

Visual Studio Code (VS Code) でTailwind CSSを使用する際、次のようなエラーが発生する場合があります。

@tailwind base;      /* ここにエラーが表示される */
@tailwind components;
@tailwind utilities;

具体的なエラーメッセージ：

Unknown at rule @tailwind css(unknownAtRules)

この問題はVS Codeが@tailwindディレクティブを認識できないために発生し、以下の影響があります：

• エディタで赤波線エラーが表示される
• Tailwindのオートコンプリート機能が動作しない
• コードハイライトが正しく機能しない

根本原因

VS CodeのデフォルトCSSパーサーはTailwind固有のディレクティブをサポートしていません。このため追加の拡張機能や設定変更が必要です。

---

効果的な解決策

方法1: Tailwind CSS IntelliSense拡張機能の導入（推奨）

必須ステップ

この解決法は93票の支持を得た公式推奨アプローチです

1. VS Code拡張機能マーケットからTailwind CSS IntelliSenseをインストール
2. 設定ファイル(settings.json)に次のコードを追加：

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

settings.jsonの開き方

1. VS CodeでCtrl + , (Windows/Linux) または Cmd + , (Mac) で設定を開く
2. 右上の「ファイルアイコン」をクリックしてJSON形式で編集

効果:

• @tailwindディレクティブのエラー表示が解消
• クラス名のオートコンプリートが有効化
• カラーリファレンスのプレビューが可能に

方法2: PostCSS Language Support拡張機能の追加

代替案

特に既存のPostCSS環境がある場合に有効（30票の解決策）

1. VS CodeでPostCSS Language Support拡張機能をインストール
2. 既存の.cssファイルを再起動なしで自動認識

長所:

• Tailwind以外のPostCSS構文もサポート
• 追加設定が不要で即時適用

方法3: ファイルタイプの手動変更

1. VS Code右下の言語モードをクリック（通常「CSS」と表示）
2. 検索ボックスにtailwindcssと入力
3. 該当ファイルに適用

::: caution 注意点 この方法は一時的な解決策で、ファイルごとに手動設定が必要です。プロジェクト全体を解決するには方法1が優れています :::

---

補足情報

Tailwind v4ユーザーへの重要注意

Tailwind CSS v4では構文が変更されています。v3の@tailwindディレクティブではなく、標準の@importを使用します：

/* v5ではこの形式が推奨される */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

configファイル問題の対処法

設定ファイル(tailwind.config.js)でパス指定が誤っていると、本質的な動作エラーが発生します：

// 間違い
content: [".src/**/*.{html,js}"] // ドットの位置が不適切

// 正しい記述
content: ["./src/**/*.{html,js}"] // 正しい相対パス

CSSハイライトが戻らない場合の対処

拡張機能導入後にシンタックスハイライトが機能しない場合：

1. VS Codeを完全再起動
2. 拡張機能の競合がないか確認
3. 言語モードが「Tailwind CSS」に設定されているか確認

非推奨な回避策

css.lint.unknownAtRules設定をignoreに変更するとエラー表示は消えますが、以下のデメリットがあります：

• その他の有効なCSSエラーまで無視される
• Tailwindの機能拡張が適用されない

---

まとめ

最も堅実な解決策は、Tailwind CSS IntelliSense拡張機能の導入＋files.associations設定の追加です。プロジェクト全体に適用でき、Tailwindの全機能サポートが得られます。導入後は.cssファイルで@tailwindディレクティブが正常認識され、生産性が大幅に向上します。

{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "tailwindCSS.includeLanguages": {
    "plaintext": "html" // HTMLファイルでもTailwind補完を有効化
  }
}

これら設定後、VS Codeの再起動が必要な場合があります。エディタとTailwindが連携することで、効率的な開発環境が構築できます。