Tailwind CSS v4 自動補完の修正

問題

Tailwind CSS v4をインストール後、VSCodeのIntellisense（クラス名の自動補完やコード提案）が機能しなくなります。

npm install tailwindcss @tailwindcss/vite

具体的な問題点:

• クラス名の入力時にオートコンプリートが表示されない
• ホバー時にクラス情報が表示されない
• 特段のエラーメッセージが表示されない

主な原因:

• Tailwind CSS v4では新たに「CSSファースト」設定が導入され、従来のtailwind.config.jsが不要になりました
• 古いバージョンのIntellisense拡張機能がv4の変更に対応できていない

推奨解決策: 拡張機能の更新と設定

1. 拡張機能のバージョン確認と更新

Tailwind CSS Intellisense拡張機能がv0.14.3以上であることを確認します：

1. VSCodeで拡張機能ビューを開く（Ctrl+Shift+X）
2. Tailwind CSS IntelliSenseを検索
3. バージョンが0.14.3以下の場合、更新ボタンをクリック

::warning{icon="⚠️"} 拡張機能を更新後、VSCodeの完全再起動が必要です :::

2. settings.jsonの設定

.vscode/settings.jsonに以下を追加（プロジェクトルートに.vscodeフォルダがない場合は新規作成）

{
  "tailwindCSS.experimental.configFile": "src/styles/app.css"
}

設定ポイント:

• src/styles/app.cssはTailwindディレクティブ（@tailwind utilities等）を含むCSSファイルパスに変更
• 複数エントリーポイントがある場合：

{
  "tailwindCSS.experimental.configFile": {
    "src/app.css": "src/**/*.{js,ts,jsx,tsx}",
    "admin/style.css": "admin/**/*.{js,ts,jsx,tsx}"
  }
}

3. 不要な設定の削除

以前のバージョンで追加した設定がある場合は削除します。特に以下が残っていると正常動作しない場合があります：

// 以下のような行があれば削除
"tailwindCSS.experimental.configFile": "./tailwind.config.js"

代替解決法

ワークアラウンド: 空の設定ファイル作成

一時的な解決策として、プロジェクトルートに空のtailwind.config.tsを作成：

// tailwind.config.ts
export default {}

モノレポ環境での対応

Turboモノレポ等の複雑な環境では、明示的に設定ファイルを指定：

{
  "tailwindCSS.experimental.configFile": "packages/ui/src/styles/globals.css"
}

よくあるエラーと対処法

拡張機能がv4を検出できない場合

1. package.jsonでTailwindがdevDependenciesではなくdependenciesにあることを確認
2. node_modules削除後、npm installで再インストール

rm -rf node_modules
npm install

Preprocessorファイルに関する警告

v4ではSass/Less/Stylusは非サポートです。関連プラグインが入っている場合：

# Preprocessor関連パッケージを削除
npm uninstall sass less stylus

根本原因と技術的背景

Tailwind CSS v4では設定方法が大幅に変更されました：

バージョン	設定ファイル	設定場所
v3	tailwind.config.js	JS/TS設定ファイル
v4	不要	CSSファイル内に直接

Intellisense拡張機能はこの変更を検知するために：

1. package.jsonでTailwindバージョンをチェック
2. @tailwindディレクティブを含むCSSファイルを検索
3. プロジェクト構造に基づいてクラスを生成

公式GitHubリポジトリのv4対応は2025年2月のアップデート(v0.14.3)で完了しています。

::tip{icon="💡"} 予防措置: 定期的に拡張機能を更新し、不要なカスタム設定を避けることで問題発生リスクを軽減できます :::

本情報は2025年5月時点のTailwind CSS v4.0とVS Code拡張機能v0.14.17に基づきます。最新情報は公式ドキュメントで確認してください。