Tailwind CSS と Ignite UI for WebComponents の統合
Ignite UI for WebComponents は、CSS 変数を通じて完全なテーマ カスタマイズを提供します。このガイドでは、Tailwind CSS をプロジェクトに統合し、igniteui-theming パッケージが提供するカスタム ユーティリティ クラスを活用する方法を紹介します。これらのクラスは Ignite UI のデザイン トークンをユーティリティとして公開し、カラー・シャドウ・タイポグラフィの一貫したスタイリングを可能にします。
概要
このガイドでは、Ignite UI Theming がすでにインストールされていることを前提としています。そうでない場合は、次を実行します。
npm install igniteui-theming
Tailwind のセットアップ
まず、公式の Tailwind インストール ガイドに従って、選択したビルド ツールまたはフレームワークに応じて Tailwind CSS をインストールします。
Tailwind をセットアップしたら、Tailwind と Ignite UI テーマ設定の両方をグローバル スタイルシートにインポートします。
@import 'tailwindcss';
@import 'igniteui-theming/tailwind/theme';
プロジェクトでスタイル設定に sass を使用している場合:
@import "tailwindcss";
@use "igniteui-theming/tailwind/theme";
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 ページが表示されます。
[!NOTE] このサンプルは架空の完全カスタム例であり、Ignite UI コンポーネント ライブラリの一部ではありません。
まとめ
わずか数ステップの設定で、Tailwind のユーティリティ ファースト アプローチと Ignite UI の堅牢なデザイン システムを組み合わせることができます。この統合により、カラー・エレベーション・タイポグラフィのトークンを直接 HTML で活用し、一貫性のあるテーマ付き UI コンポーネントを迅速に構築できます。