IntelliJ IDEA 2026.1 Help

Tailwind CSS

IntelliJ IDEA は Tailwind CSS(英語) と統合され、 Tailwind CSS 構文のサポート(英語) 、Tailwind CSS クラス名の補完、CSS 関数とディレクティブ、ホバー時の CSS 結果のプレビュー、Tailwind CSS 固有のインスペクションを提供します。

IntelliJ IDEA の Tailwind CSS サポートは、Tailwind CSS パッケージを検出し、パッケージバージョンに基づいて Tailwind CSS 固有のプロジェクト構成を検索する Tailwind CSS 言語サーバー(英語)によってサポートされています。

  • Tailwind CSS 4 では、言語サーバーは @import "tailwindcss" ディレクティブを含む CSS ファイルを検索します。

  • Tailwind CSS 3 では、言語サーバーは tailwind.config.js ファイルを探します。

IntelliJ IDEA には Tailwind CSS Language Server がバンドルされています。 ただし、最新のサーバーバージョンをダウンロードし、 Tailwind CSS 言語サーバーを構成する に記載されているように 設定 | 言語 & フレームワーク | スタイルシート | Tailwind CSS ページでそのパスを指定して、言語サーバーを最新の状態に保つことをお勧めします。

始める前に

  1. お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。 ローカル Node.js インタープリターの構成、 Linux用のWindows Subsystem (WSL) で Node.js を使用する、 リモート Node.js ランタイムの構成の説明に従って、プロジェクトで Node.js ランタイムを設定してください。

  2. 設定で CSS バンドルプラグインが有効になっていることを確認してください。 Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。 インストール済み タブをクリックします。 検索フィールドに CSS と入力します。 プラグインに関する詳細は、 プラグインの管理を参照してください。

  3. JetBrains Marketplace からプラグインをインストールする 説明に従って、 設定 | プラグイン ページの Marketplace タブで Tailwind CSS プラグインをインストールして有効にしてください。 このプラグインは IntelliJ IDEA Ultimate でのみ利用可能です。

  4. tailwindcss パッケージが package.json の依存関係としてリストされていること、およびプロジェクトが CSS ファイル (TailwindCSS 4) または tailwind.config.js (TailwindCSS 3) ファイルの @import "tailwindcss" ディレクティブを介して正しく構成されていることを確認します。

    または、 以下の説明に従ってTailwind CSS をインストールして構成します。

Tailwind CSS をインストールして設定する

TailwindCSS 公式 Web サイト(英語)の詳細な手順についてはこちらを参照してください。

  1. 埋め込み ターミナル （Alt+F12 ）を開いて、次のように入力します。

    npm install -D tailwindcss

  2. Tailwind CSS を使用する CSS ファイルを開き、次の インポート ステートメントを追加します。

    @import "tailwindcss";

  3. Tailwind CSS Language Server を再起動します。 これを行うには、ステータスバーの 言語サービス ウィジェット（アイコンは the Language Services widget または the Language Services widget ）をクリックし、 Tailwind CSS の横にある サービスの再起動アイコン をクリックします。

    Tailwind CSS サーバーを再起動する

  4. HTML ファイルを開き、 <head></head> タグに CSS ファイルへのリンクを追加します（例: <link href="/src/styles.css" rel="stylesheet">）。

Tailwind CSS 言語サーバーを構成する

IntelliJ IDEA の Tailwind CSS サポートは、Tailwind CSS パッケージを検出し、パッケージバージョンに基づいて Tailwind CSS 固有のプロジェクト構成を検索する Tailwind CSS 言語サーバー(英語)によってサポートされています。

  • Tailwind CSS 4 では、言語サーバーは @import "tailwindcss" ディレクティブを含む CSS ファイルを検索します。

  • Tailwind CSS 3 では、言語サーバーは tailwind.config.js ファイルを探します。

IntelliJ IDEA には Tailwind CSS Language Server がバンドルされています。 ただし、言語サーバーを最新の状態に保つことをお勧めします。

デフォルトの Tailwind CSS 構成オプションをカスタマイズすることもできます。

  1. @tailwindcss/ 言語サーバーパッケージ(英語)の最新バージョンをグローバルにインストールします。 これを行うには、組み込みの ターミナル （Alt+F12 ）を開き、次のように入力します。

    npm install -g @tailwindcss/language-server

  2. 設定 ダイアログ（Ctrl+Alt+S ）を開き、 設定 | 言語 & フレームワーク | スタイルシート | Tailwind CSS に進みます。

  3. 言語サーバー フィールドに、 @tailwindcss/language -server パッケージへのパスを指定します。

  4. 必要に応じて、デフォルトの Tailwind CSS 構成オプション(英語)をカスタマイズします。 例: クラス補完を提供する HTML 属性(英語)リストを調整したり、実験的な 正規表現形式(英語)を使用して補完をトリガーする追加の場所を指定したりすることができます。

    構成 領域で、プロパティを更新して構成オプションを追加します。

完全な Tailwind CSS クラス

Tailwind CSS 言語サーバーは、HTML や CSS ファイル内の @apply ディレクティブの後、JavaScript 文字列リテラルなど、さまざまなコンテキストで Tailwind CSS クラスの自動補完機能を提供します。 補完リストでは、言語サーバーからの提案は the Tailwind CSS icon でマークされ、 the Class icon はプロジェクトですでに使用されているクラスからの提案を示します。

補完リスト — サーバーとプロジェクトからの提案

結果の CSS をプレビューする

HTML または CSS ファイル内の Tailwind CSS クラスにマウスオーバーすると、IntelliJ IDEA は ドキュメント ポップアップウィンドウに、結果の CSS のプレビューを表示します。 ツールウィンドウでプレビューを表示するには、 the More icon をクリックし、 ドキュメントツールウィンドウに表示 を選択します。

CSS プレビュー

コードを完了すると、プレビューは ドキュメント ポップアップ（Ctrl+Q ）にも表示されます。

コードの完成中に結果の CSS をプレビューする

.slim、.haml、その他のファイルでの Tailwind CSS サポート

IntelliJ IDEA は、 .slim 、 .haml 、 .jte 、 .kte など、他のファイルタイプ内の Tailwind CSS クラスの補完を提供できます。

  1. Ctrl+Alt+S を押して設定を開き、 言語 & フレームワーク | スタイルシート | Tailwind CSS を選択します。

  2. includeLanguages プロパティに、Tailwind CSS クラスの補完を取得したいコンテキストを追加します。 以下の形式を使用してください。

    • "slim": "slim"

    • "haml": "haml"

    • "jte": "html"

    • "kte": "html"

  3. Slim テンプレートと .haml ファイルで Tailwind CSS クラス補完を有効にするには、 emmetCompletions プロパティを true に設定します。

    補完用のカスタムコンテキストを追加する

トラブルシューティング

Tailwind CSS 固有のコーディング支援が受けられなくなった場合は、次のいずれかの理由が考えられます。

Tailwind CSS 言語サーバーが古い},{

上記の説明に従って、 Tailwind CSS 言語サーバーの最新バージョンをインストールします。

@import 'tailwindcss' を含む CSS ファイルが破損している

@import 'tailwindcss' を含む CSS ファイルが破損している場合、サーバーの初期化が失敗することがあります。 その場合は、エラーインジケーター an Error icon がステータスバーに表示され、 Tailwind CSS 項目の横にも表示されます。

エラーインジケーターがステータスバーに表示される

この問題を解決するために：

  1. @import "tailwindcss" 以外のすべてをコメントアウトし、CSS ファイルを保存して、サーバーを再起動してください。

  2. コメントを削除し、ファイルを保存し、問題のあるフラグメントが見つかるまで段階的にサーバーを再起動します。

Tailwind CSS 言語サーバーが起動しない

このようなエラーが発生すると、ステータスバーの 言語サービス ウィジェットと Tailwind CSS 項目に an Error icon のマークが付きます。

Tailwind CSS 言語サーバーエラー

このようなエラーは、多くの場合、Node.js の設定が間違っていることが原因です。 この問題を解決するために:

  1. Ctrl+Alt+S を押して設定を開き、 言語 & フレームワーク | JavaScript ランタイム を選択します。

  2. 優先ランタイム フィールドで Node.js が選択されていることを確認してください。

  3. Node.js ランタイムへのパスが正しいことを確認してください。

Node.js インタープリターの設定の詳細を参照してください。

2026 年 3 月 30 日
Stylusデータベースツールおよび SQL