IntelliJ IDEA 2020.3 ヘルプ

Tailwind CSS

IntelliJ IDEA は Tailwind CSS(英語) フレームワークと統合され、HTML ファイルの Tailwind クラスの補完と疑似クラスバリアントの補完提案、HTML および CSS ファイルのクラスにカーソルを合わせたときの結果の CSS のプレビュー、または自動補完が含まれます。IntelliJ IDEA は tailwind.config.js ファイルを認識し、それらに加えたカスタマイズに基づいて補完を提供します。

始める前に

  1. お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。

  2. JetBrains リポジトリからプラグインをインストールする説明に従って、設定 / 環境設定 | プラグインページで Tailwind CSS プラグインをインストールして有効にします。

TailwindCSS をインストールする

  1. 埋め込みターミナルAlt+F12)を開いて、次のように入力します。

    npm install tailwindcss postcss autoprefixer

  2. Tailwind CSS インストールを構成するには、プロジェクトのルートに tailwind.config.js 構成ファイルを生成します。埋め込まれたターミナルAlt+F12)に、次のように入力します。

    npx tailwindcss init

TailwindCSS 公式 Web サイト(英語)の詳細を参照してください。

Tailwind クラスを補完する

IntelliJ IDEA は、@apply ディレクティブの後に HTML ファイルおよび CSS ファイルの Tailwind クラスを自動補完します。

Completing Tailwind classes after @apply directive

疑似クラスバリアントの補完の提案も示されています。

Completion suggestions for pseudo-class variants

結果の CSS をプレビューする

HTML または CSS ファイルの Tailwind クラスにカーソルを合わせると、IntelliJ IDEA に結果の CSS のプレビューが表示されます。

コードを完了すると、プレビューはドキュメントポップアップ(Ctrl+Q)にも表示されます。

Preview the resulting CSS while completing code

tailwind.config.js を編集する

IntelliJ IDEA は、tailwind.config .js 構成ファイルを介して行ったカスタマイズに基づいてコード補完を提供します。例: 新しい色でカスタムテーマを定義すると、カスタム色の名前で新しく生成されたクラスが補完ポップアップに表示されます。

Completion based on customization in tailwind.config.js

関連ページ:

プラグインを管理する

このサイトのメニューやアクション名表記は日本語です。IntelliJ IDEA を日本語化するには、日本語言語パックのインストールを参照してください。プラグインは以下に示すように IntelliJ IDEA のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コーディング演習と検証で新しい...

Stylus

IntelliJ IDEA を使用すると、Stylus コードをすぐに CSS に変換できます。始める前に:お使いのコンピューターに Node.js がインストールされていることを確認してください。JetBrains リポジトリからプラグインをインストールする説明に従って、設定 / 環境設定 | プラグインページでファイル監視プラグインをインストールして有効にします。Stylus のインストール:埋め込みターミナルに次のように入力します。Stylus オフィシャル Web サイトの詳細を参照してく...

TypeScript

IntelliJ IDEA は、TypeScript ソースコードの開発、実行、デバッグをサポートしています。IntelliJ IDEA は .ts および .tsx ファイルを認識し、追加の手順なしで編集するための幅広いコーディング支援を提供します。TypeScript ファイルはアイコンでマークされています。TypeScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の補完、エラーと構文のハイライト、フォーマット、多数のコードインスペクションとクイックフィックス、およ...