Tailwind CSS と Ignite UI for Angular の統合

概要

ng add igniteui-angular

1. Tailwind のインストール

次のコマンドを使用して tailwind をインストールします。

npm install tailwindcss @tailwindcss/postcss postcss --force

2. PostCSS プラグインの設定

プロジェクトのルートに .postcssrc.json ファイルを作成し、PostCSS 設定に @tailwindcss/postcss プラグインを追加します。

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

3. Tailwind CSS のインポート

メインのスタイルシート (styles.css または styles.scss) に Tailwind と Ignite UI Tailwind テーマ設定をインポートします。

@import "tailwindcss";
@import "igniteui-theming/tailwind/themes/base";

プロジェクトでスタイル設定に sass を使用している場合:

@import "tailwindcss";
@use "igniteui-theming/tailwind/themes/base";

インポート パスが node_modules から正しく解決されることを確認してください。

Ignite UI カスタム ユーティリティ クラスの使用

igniteui-theming パッケージには、Ignite UI のデザイン トークンをユーティリティ クラスとして公開する Tailwind のカスタム設定が含まれています。これには以下が含まれます:

• カラーとコントラスト カラー

• エレベーション (シャドウ)

• タイポグラフィ スタイル

それぞれの使い方を見ていきましょう。

カラー ユーティリティ クラス

Ignite UI のカラー トークンを HTML で直接使用できます。

<h1 class="bg-primary-500 text-primary-500-contrast">This is a title</h1>

Tailwind の完全なカラー システムはこちらで確認でき、Ignite UI が提供するクラス名を使って適用できます。

シャドウ ユーティリティ クラス

定義済みのエレベーション レベル (0 ～ 24) のいずれかを使用して深度を追加できます。

<div class="shadow-elevation-8">Elevated container</div>

Tailwind が提供するすべてのシャドウ関連のユーティリティ クラスは、こちらで見つけることができます。

タイポグラフィ カスタム ユーティリティ スタイル

フォントを適用するには、トップ レベルの要素に font-ig クラスを追加します。text-base ユーティリティ クラスを使用して基本フォント サイズを定義することもできます。 各タイポグラフィ レベル (例: h1、h2、body-1) ごとにカスタム ユーティリティ クラスを提供しています。以下のように使用してください。

<p class="type-style-h3">This paragraph gets the h3 styles</p>

各クラスは、Ignite UI のタイプ スケールに応じて、必要なすべてのフォント設定、間隔、サイズを適用します。

サンプル

以下のサンプルでは、shadows、colors、typography 用のカスタム ユーティリティを含む、Tailwind ユーティリティ クラスのみを使用して構築された 404 ページが表示されます。

各コンポーネントのスタイルを設定する方法については、それぞれのドキュメント トピックの**「スタイル設定」**セクションを参照してください。

まとめ

わずか数ステップの設定で、Tailwind のユーティリティ ファースト アプローチと Ignite UI の堅牢なデザイン システムを組み合わせることができます。この統合により、カラー・エレベーション・タイポグラフィのトークンを直接 HTML で活用し、一貫性のあるテーマ付き UI コンポーネントを迅速に構築できます。

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)