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 Language Server がバンドルされています。ただし、最新のサーバーバージョンをダウンロードし、Tailwind CSS 言語サーバーを構成するに記載されているように ページでそのパスを指定して、言語サーバーを最新の状態に保つことをお勧めします。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。ローカル Node.js インタープリターの構成、Linux の Windows サブシステムで Node.js を使用する、リモート 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 Language Server がバンドルされています。ただし、言語サーバーを最新の状態に保つことをお勧めします。
デフォルトの 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 は、.slim、.haml、.jte、.kte など、他のファイルタイプ内の Tailwind CSS クラスの補完を提供できます。
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 インタープリターの設定の詳細を参照してください。
関連ページ：
Node.js
Node.js は、サーバーやコマンドラインなど、ブラウザーの外部で JavaScript を実行するための軽量ランタイム環境です。WebStorm は Node.js と統合されており、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、保守を支援します。Node.js がアプリケーションのローカルランタイムとして、または npm パッケージの管理、JavaScript リンターの実行、ツールのビルド、フレームワークのテストなどにのみ必要な場合は、Node.js をインストール...
リモート Node.js ランタイムの構成
WebStorm では、リモートホストまたは仮想環境にインストールされた Node.js 上でアプリケーションを開発、テスト、リント、実行、デバッグする場合、リモート Node.js ランタイムを構成する必要があります。リモート Node.js ランタイムは、Node.js リモートインタープリターの構成ダイアログで設定します。このダイアログは、設定ダイアログの JavaScript ランタイムページから、またはそれ以降に、リモート環境でアプリケーションを実行またはデバッグするための Node.j...
プラグインのインストール
プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...
Stylus
WebStorm を使用すると、Stylus コードをすぐに CSS に変換できます。始める前に：お使いのコンピューターに Node.js がインストールされていることを確認してください。JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブに Stylus プラグインをインストールして有効にします。設定で File Watchers プラグインが有効になっていることを確認します。を押して設定を開き、を選択します。インストール...
Svelte
WebStorm は、構文のハイライト、自動インポートを備えたコード補完、リファクタリング、ナビゲーション、インテンション、コードの折りたたみ、ライブテンプレートのサポート、正しいフォーマットなどの基本的な洗練されたフレームワーク機能を提供します。始める前に：お使いのコンピューターに Node.js がインストールされていることを確認してください。JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブに Svelte プラ...