Tailwind CSS
WebStorm は Tailwind CSS と連携し、 Tailwind CSS 構文サポート 、Tailwind CSS クラス名の補完、CSS 関数とディレクティブ、ホバー時の CSS 結果プレビュー、Tailwind CSS 固有のインスペクションを提供します。
WebStorm の Tailwind CSS サポートは、Tailwind CSS パッケージを検出し、パッケージバージョンに基づいて Tailwind CSS 固有のプロジェクト構成を検索する Tailwind CSS 言語サーバー によって提供されています：
Tailwind CSS 4 では、言語サーバーは
@import "tailwindcss"ディレクティブを含む CSS ファイルを検索します。Tailwind CSS 3 では、言語サーバーは tailwind.config.js ファイルを探します。
WebStorm にはバンドルされた Tailwind CSS 言語サーバーが付属しています。 ただし、最新のサーバーバージョンをダウンロードし、 Tailwind CSS 言語サーバーを構成する に記載されているように ページでそのパスを指定して、言語サーバーを最新の状態に保つことをお勧めします。
始める前に
コンピューターに Node.js(英語) があることを確認してください。 プロジェクトで Node.js ランタイムを設定するには、 ローカル Node.js インタープリターの構成、 Linux 用 Windows サブシステムで Node.js を使用する 、または リモート Node.js ランタイムの構成の説明をご覧ください。
設定 | プラグイン ページの インストール済み タブで CSS および Tailwind CSS バンドルプラグインが有効になっていることを、 プラグインの管理の説明に従って確認してください。
tailwindcssパッケージが package.json の依存関係としてリストされていること、およびプロジェクトが CSS ファイル (TailwindCSS 4) または tailwind.config.js (TailwindCSS 3) ファイルの@import "tailwindcss"ディレクティブを介して正しく構成されていることを確認します。または、 以下の説明に従ってTailwind CSS をインストールして構成します。
Tailwind CSS をインストールして設定する
TailwindCSS 公式 Web サイト(英語)の詳細な手順についてはこちらを参照してください。
埋め込み ターミナル （Alt+F12 ）を開いて、次のように入力します。
npm install -D tailwindcssTailwind CSS を使用する CSS ファイルを開き、次の
importステートメントを追加します。@import "tailwindcss";Tailwind CSS Language Server を再起動します。 これを行うには、ステータスバーの 言語サービス ウィジェット（アイコンは
または 
）をクリックし、 Tailwind CSS の横にある 
をクリックします。
HTML ファイルを開き、
<head></head>タグに CSS ファイルへのリンクを追加します（例:<link href="/src/styles.css" rel="stylesheet">）。
Tailwind CSS 言語サーバーを構成する
WebStorm の Tailwind CSS サポートは、Tailwind CSS パッケージを検出し、パッケージバージョンに基づいて Tailwind CSS 固有のプロジェクト構成を検索する Tailwind CSS 言語サーバー によって提供されています：
Tailwind CSS 4 では、言語サーバーは
@import "tailwindcss"ディレクティブを含む CSS ファイルを検索します。Tailwind CSS 3 では、言語サーバーは tailwind.config.js ファイルを探します。
WebStorm にはバンドルされた Tailwind CSS 言語サーバーが付属しています。 ただし、言語サーバーを最新の状態に保つことをお勧めします。
デフォルトの Tailwind CSS 構成オプションをカスタマイズすることもできます。
@tailwindcss/ 言語サーバーパッケージ(英語)の最新バージョンをグローバルにインストールします。 これを行うには、組み込みの ターミナル （Alt+F12 ）を開き、次のように入力します。
npm install -g @tailwindcss/language-server設定 ダイアログ（Ctrl+Alt+S ）を開き、 に進みます。
言語サーバー フィールドに、
@tailwindcss/language -serverパッケージへのパスを指定します。必要に応じて、デフォルトの Tailwind CSS 構成オプション(英語)をカスタマイズします。 例: クラス補完を提供する HTML 属性(英語)リストを調整したり、実験的な 正規表現形式(英語)を使用して補完をトリガーする追加の場所を指定したりすることができます。
構成 領域で、プロパティを更新して構成オプションを追加します。
完全な Tailwind CSS クラス
Tailwind CSS 言語サーバーは、HTML や CSS ファイル内の @apply ディレクティブの後、JavaScript 文字列リテラルなど、さまざまなコンテキストで Tailwind CSS クラスの自動補完機能を提供します。 補完リストでは、言語サーバーからの提案は 
でマークされ、 
はプロジェクトですでに使用されているクラスからの提案を示します。
結果の CSS をプレビューする
HTML または CSS ファイルで Tailwind CSS クラスにマウスオーバーすると、WebStorm は結果の CSS のプレビューを含む ドキュメント ポップアップを表示します。 ツールウィンドウでプレビューを表示するには、 
をクリックし、 ドキュメントツールウィンドウに表示 を選択します。
コードを完了すると、プレビューは ドキュメント ポップアップ（Ctrl+Q ）にも表示されます。
.slim、.haml、その他のファイルでの Tailwind CSS サポート
WebStorm は、他のファイルタイプ内でも Tailwind CSS クラスの補完を提供できます。例として、 .slim 、 .haml 、 .jte 、 .kte などがあります。
Ctrl+Alt+S を押して設定を開き、 を選択します。
includeLanguagesプロパティに、Tailwind CSS クラスの補完を取得したいコンテキストを追加します。 以下の形式を使用してください。"slim": "slim""haml": "haml""jte": "html""kte": "html"
Slim テンプレートと .haml ファイルで Tailwind CSS クラス補完を有効にするには、
emmetCompletionsプロパティをtrueに設定します。
トラブルシューティング
Tailwind CSS 固有のコーディング支援が受けられなくなった場合は、次のいずれかの理由が考えられます。
- Tailwind CSS 言語サーバーが古いです
上記の説明に従って、 Tailwind CSS 言語サーバーの最新バージョンをインストールします。
- @import 'tailwindcss' を含む CSS ファイルが破損しています
@import 'tailwindcss' を含む CSS ファイルが破損している場合、サーバーの初期化が失敗する可能性があります。 その場合、ステータスバーと Tailwind CSS 項目の横にエラーインジケーター
が表示されます。
問題を解決するには:
@import "tailwindcss"以外のすべてをコメントアウトし、CSS ファイルを保存して、サーバーを再起動してください。コメントを削除し、ファイルを保存し、問題のあるフラグメントが見つかるまで段階的にサーバーを再起動します。
- Tailwind CSS 言語サーバーが起動しません
このようなエラーが発生すると、ステータスバーの 言語サービス ウィジェットと Tailwind CSS 項目に
のマークが付きます。
このようなエラーは、多くの場合、Node.js の設定が間違っていることが原因です。 この問題を解決するために:
Ctrl+Alt+S を押して設定を開き、 を選択します。
推奨ランタイム フィールドで Node.js が選択されていることを確認してください。
Node.js ランタイムへのパスが正しいことを確認してください。
Node.js インタープリターの設定の詳細を参照してください。