Tailwind CSS
PhpStorm は Tailwind CSS(英語) フレームワークと統合され、HTML ファイルの Tailwind クラスの補完と疑似クラスバリアントの補完提案、HTML および CSS ファイルのクラスにカーソルを合わせたときの結果の CSS のプレビュー、または自動補完が含まれます。PhpStorm は tailwind.config.js ファイルを認識し、それらに加えたカスタマイズに基づいて補完を提供します。
始める前に
コンピューターに Node.js(英語) があることを確認してください。また、Node.js のバージョンが TailwindCSS 要件に準拠していることを確認してください。例: TailwindCSS v2.0 には Node.js12.13 以降が必要です。TailwindCSS アップグレードガイド(英語)から詳細を参照してください。
ローカル Node.js インタープリターの構成、または Linux の Windows サブシステムで Node.js を使用する、またはリモート Node.js インタープリターの構成に従って、プロジェクトで Node.js インタープリターを構成します。
プラグインのマッピングの説明に従って、設定 | プラグインページのインストール済みタブで CSS および Tailwind CSS バンドルプラグインが有効になっていることを確認します。
TailwindCSS をインストールする
埋め込まれたターミナル (Alt+F12) を開きます。
Tailwind CSS をインストールするには、次のように入力します。
npm install -D tailwindcss構成ファイルを生成するには、次のように入力します。
npx tailwindcss initその結果、プロジェクトのルートに tailwind.config.js 構成ファイルが作成されます。
TailwindCSS 公式 Web サイト(英語)の詳細を参照してください。
Tailwind クラスを補完する
PhpStorm は、@apply ディレクティブの後に HTML ファイルおよび CSS ファイルの Tailwind クラスを自動補完します。
PhpStorm は、JavaScript 文字列リテラルで完了するための Tailwind クラスを提案します。
疑似クラスバリアントの補完の提案も示されています。
他のコンテキストで Tailwind クラスを完了する
PhpStorm は、スリムなテンプレート(英語)内および .haml、.jte、.kte ファイル内の Tailwind クラスの補完を提供できます。
Ctrl+Alt+S を押して設定を開き、 を選択します。
includeLanguagesプロパティで、Tailwind クラスの補完を取得するコンテキストを追加します。次の形式を使用します。"slim": "slim""haml": "haml""jte": "html""kte": "html"
Slim テンプレートおよび .haml ファイルで Tailwind クラス補完を有効にするには、
emmetCompletionsプロパティをtrueに設定します。
結果の CSS をプレビューする
HTML または CSS ファイル内の Tailwind クラスにマウスを移動すると、PhpStorm によって、結果の CSS のプレビューを含むドキュメントポップアップが表示されます。ツールウィンドウでプレビューを表示するには、
をクリックしてドキュメントツールウィンドウに表示を選択します。
コードを完了すると、プレビューはドキュメントポップアップ（Ctrl+Q）にも表示されます。
tailwind.config.js を編集する
PhpStorm は、tailwind.config.js 構成ファイルを介して行ったカスタマイズに基づいてコード補完を提供します。例: 新しい色でカスタムテーマを定義すると、カスタム色の名前で新しく生成されたクラスが補完ポップアップに表示されます。
Tailwind オプションの構成
デフォルトの Tailwind 構成オプション(英語)をカスタマイズすることもできます。例: クラス補完を提供する HTML 属性(英語)リストを調整するか、実験的な正規表現形式(英語)を使用して、補完がトリガーされる追加の場所を指定することができます。
設定ダイアログ（Ctrl+Alt+S）を開き、 に移動します。
プロパティを更新して構成オプションを追加します。
関連ページ：
Node.js
Node.js は、サーバーやコマンドラインなど、ブラウザーの外部で JavaScript を実行するための軽量ランタイム環境です。PhpStorm は Node.js と統合されており、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、保守を支援します。Node.js がアプリケーションのローカルランタイムとして、または npm パッケージの管理、JavaScript リンターの実行、ツールのビルド、フレームワークのテストなどにのみ必要な場合は、Node.js をインストール...
リモート Node.js インタープリターの構成
PhpStorm では、リモートホストまたは仮想環境にインストールされた Node.js でアプリケーションを開発、テスト、リント、実行、デバッグするときに、リモート Node.js インタープリターを構成する必要があります。リモート Node.js インタープリターは、Node.js リモートインタープリターの構成ダイアログで構成されます。このダイアログは、リモート環境でアプリケーションを実行またはデバッグするための Node.js 実行 / デバッグ構成を作成または編集するときに、設定ダイア...
プラグインのインストール
プラグインは PhpStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...
Stylus
PhpStorm を使用すると、Stylus コードをすぐに CSS に変換できます。始める前に：お使いのコンピューターに Node.js がインストールされていることを確認してください。JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブに Stylus プラグインをインストールして有効にします。設定で File Watchers プラグインが有効になっていることを確認します。を押して設定を開き、を選択します。インストール...