Tailwind CSS と Ignite UI for React の統合

Ignite UI for React は、CSS 変数を通じてテーマを完全にカスタマイズできます。このガイドでは、Tailwind CSS をプロジェクトに統合し、igniteui-theming パッケージが提供するカスタム ユーティリティ クラスを活用する方法を紹介します。これらのクラスは Ignite UI for React のデザイン トークンをユーティリティとして公開し、カラー・シャドウ・タイポグラフィの一貫したスタイリングを可能にします。

概要

このガイドでは、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 className="bg-primary-500 text-primary-500-contrast">This is a title</h1>

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

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

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

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

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

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

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

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

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

まとめ

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