Tailwind CSS
PyCharm は Tailwind CSS と連携し、 Tailwind CSS 構文サポート 、Tailwind CSS クラス名の補完、CSS 関数やディレクティブの補完、ホバー時の生成される CSS のプレビュー、さらに Tailwind CSS 固有のインスペクションを提供します。
PyCharm の Tailwind CSS サポートは、Tailwind CSS パッケージを検出し、パッケージバージョンに基づいて Tailwind CSS 固有のプロジェクト構成を検索する Tailwind CSS 言語サーバー によって支えられています：
Tailwind CSS 4 では、言語サーバーは
@import "tailwindcss"ディレクティブを含む CSS ファイルを検索します。Tailwind CSS 3 では、言語サーバーは tailwind.config.js ファイルを探します。
PyCharm には Tailwind CSS Language Server がバンドルされています。 ただし、最新のサーバーバージョンをダウンロードし、 Tailwind CSS 言語サーバーを構成する に記載されているように ページでそのパスを指定して、言語サーバーを最新の状態に保つことをお勧めします。
始める前
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。 プロジェクトで Node.js ランタイムを設定するには、 ローカル Node.js インタープリターの構成、 Windows Subsystem for Linux での Node.js の使用、 リモート Node.js ランタイムの構成 の説明に従ってください。
設定で CSS バンドルプラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに CSS と入力します。 プラグインの詳細については、 Managing plugins を参照してください。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの マーケットプレース タブで Tailwind CSS プラグインをインストールして有効化してください。 このプラグインは PyCharm Pro でのみ利用できます。
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 言語サーバーを構成する
PyCharm の Tailwind CSS サポートは、Tailwind CSS パッケージを検出し、パッケージバージョンに基づいて Tailwind CSS 固有のプロジェクト構成を検索する Tailwind CSS 言語サーバー によって支えられています：
Tailwind CSS 4 では、言語サーバーは
@import "tailwindcss"ディレクティブを含む CSS ファイルを検索します。Tailwind CSS 3 では、言語サーバーは tailwind.config.js ファイルを探します。
PyCharm には 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 クラスにマウスオーバーすると、PyCharm は ドキュメント ポップアップで生成された CSS のプレビューを表示します。 ツールウィンドウでプレビューを表示するには、 
をクリックし、 ドキュメントツールウィンドウに表示 を選択します。
コードを完了すると、プレビューは ドキュメント ポップアップ（Ctrl+Q ）にも表示されます。
.slim、.haml、その他のファイルでの Tailwind CSS サポート
PyCharm は .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 インタープリターの設定の詳細を参照してください。