Tailwind CSS
JetBrains Rider は Tailwind CSS と連携し、 Tailwind CSS 構文サポート 、Tailwind CSS クラス名の補完、CSS 関数やディレクティブ、ホバー時に結果の CSS をプレビュー、Tailwind CSS 固有のインスペクションを提供します。
JetBrains Rider の Tailwind CSS サポートは、 Tailwind CSS 言語サーバーによって支えられており、Tailwind CSS パッケージを検出し、パッケージバージョンに基づいて Tailwind CSS 固有のプロジェクト構成を検索します：
Tailwind CSS 4 では、言語サーバーは
@import "tailwindcss"ディレクティブを含む CSS ファイルを検索します。Tailwind CSS 3 では、言語サーバーは tailwind.config.js ファイルを探します。
JetBrains Rider には Tailwind CSS 言語サーバーがバンドルされています。 ただし、最新のサーバーバージョンをダウンロードし、 Tailwind CSS 言語サーバーを構成する に記載されているように ページでそのパスを指定して、言語サーバーを最新の状態に保つことをお勧めします。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。 ローカル Node.js インタープリターの構成、 Linux の Windows サブシステムで Node.js を使用する、 リモート Node.js ランタイムの構成の説明に従って、プロジェクトで Node.js ランタイムを設定してください。
Managing plugins の説明に従い、 設定 | プラグイン ページの インストール済み タブで CSS と Tailwind CSS のバンドルプラグインが有効化されていることを確認してください。
tailwindcssパッケージが package.json の依存関係としてリストされていること、およびプロジェクトが CSS ファイル (TailwindCSS 4) または tailwind.config.js (TailwindCSS 3) ファイルの@import "tailwindcss"ディレクティブを介して正しく構成されていることを確認します。または、 以下の説明に従ってTailwind CSS をインストールして構成します。
ASP.NET または Blazor プロジェクトで 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 言語サーバーを構成する
JetBrains Rider の Tailwind CSS サポートは、 Tailwind CSS 言語サーバーによって支えられており、Tailwind CSS パッケージを検出し、パッケージバージョンに基づいて Tailwind CSS 固有のプロジェクト構成を検索します：
Tailwind CSS 4 では、言語サーバーは
@import "tailwindcss"ディレクティブを含む CSS ファイルを検索します。Tailwind CSS 3 では、言語サーバーは tailwind.config.js ファイルを探します。
JetBrains Rider には Tailwind CSS 言語サーバーがバンドルされています。 ただし、言語サーバーを最新の状態に保つことをお勧めします。
デフォルトの Tailwind CSS 構成オプションをカスタマイズすることもできます。
@tailwindcss/ 言語サーバーパッケージ(英語)の最新バージョンをグローバルにインストールします。 これを行うには、組み込みの ターミナル （Alt+F12 ）を開き、次のように入力します。
npm install -g @tailwindcss/language-server設定 ダイアログ（Ctrl+Alt+S ）を開き、 に進みます。
言語サーバー フィールドに、
@tailwindcss/language -serverパッケージへのパスを指定します。必要に応じて、デフォルトの Tailwind CSS 構成オプション(英語)をカスタマイズします。 例: クラス補完を提供する HTML 属性(英語)リストを調整したり、実験的な 正規表現形式(英語)を使用して補完をトリガーする追加の場所を指定したりすることができます。
Configuration 領域で、プロパティを更新して構成オプションを追加します。
完全な Tailwind CSS クラス
Tailwind CSS 言語サーバーは、HTML や CSS ファイル内の @apply ディレクティブの後、JavaScript 文字列リテラルなど、さまざまなコンテキストで Tailwind CSS クラスの自動補完機能を提供します。 補完リストでは、言語サーバーからの提案は 
でマークされ、 
はプロジェクトですでに使用されているクラスからの提案を示します。
結果の CSS をプレビューする
HTML または CSS ファイルの Tailwind CSS クラスにマウスオーバーすると、JetBrains Rider は ドキュメント ポップアップで結果の CSS プレビューを表示します。 ツールウィンドウでプレビューを表示するには、 
をクリックし、 ドキュメントツールウィンドウに表示 を選択します。
コードを完了すると、プレビューは ドキュメント ポップアップ（Ctrl+Q ）にも表示されます。
.slim、.haml、その他のファイルでの Tailwind CSS サポート
JetBrains Rider は .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 インタープリターの設定の詳細を参照してください。