Tailwind でテーマを作成する

Auth0 ACUL と Tailwind CSS を使用して、メインアプリケーションのスタイルに合わせてログインエクスペリエンスをカスタマイズする Universal Login テーマを構築する方法を説明します

始める前に

必要なもの:

• Universal Login と カスタムドメイン が設定された Auth0 開発用テナント
• Auth0 のファーストパーティアプリケーション
• Auth0 テナントで Identifier First Authentication を有効にしておくこと
• Node.js V22+
• 既存のテナントに対して認証済み の Auth0 CLI
• ACUL Quickstart ガイドに目を通しておくこと

Universal Login には、認証プロセスの各ステップにあたる複数のプロンプトがあり、それぞれのステップには少なくとも 1 つの画面が含まれます。ACUL を使うと、すべてのカスタム画面にテーマを適用できます。

例えば:

Tailwind CSS v4 を使って、この Login 画面にテーマを適用できます。

テーマやブランディングに関するカスタマイズはすべて、ACUL プロジェクトの src/index.css にあります。

1. Auth0 CLI を使用して、新しいテーマを適用する画面を含む ACUL プロジェクトを作成します。

auth0 acul init <Your-App-Name>

2. CSS ファイル src/index.css を編集します。

/* src/index.css 内 */
:root {
  /* ブランドのプライマリカラーに合わせて、これらのCSS変数を変更してください */
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);

  /* カスタムカラーを参照するようにテーマ変数を上書きしてください*/  
  --color-primary-button: var(--ul-theme-color-primary-button);

  /* 特定のコンポーネントの色を直接上書きすることも可能です */
  --color-header: var(--primary-foreground);
  --color-body-text: #000000;
  --color-widget-bg: white;
  --color-widget-border: transparent;
  /* ... その他多数 */
}

@theme inline ブロック内の CSS 変数は、ベースコンポーネントで使用されます。 --ul-theme- で始まる CSS 変数には、デフォルトの Universal Login のスタイルが設定されており、実行時にテナントで設定されたブランディングテーマによって自動的に上書きされます。詳しくは、プロジェクトのディレクトリ内にある src/utils/theme/themeEngine.ts ファイルをご覧ください。