Tailwind でテーマを作成する

ACUL で Tailwind CSS を使ってテーマを作成する方法を学びます

始める前に

必要なもの:

• Universal Login と カスタムドメイン が設定された Auth0 開発テナント
• Auth0 の First Party Application
• Auth0 テナントで Identifier First Authentication を有効にすること
• Node.js V22+
• 既存のテナントで認証済み の Auth0 CLI Tool
• ACUL クイックスタートガイド を確認しておくこと

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

たとえば:

Tailwind CSS v4 を使用して、このログイン画面にテーマを適用できます。

テーマやブランディングに関するカスタマイズは、すべて 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 のデフォルトスタイルが設定されており、実行時にテナントで設定した Branding テーマによって自動的に上書きされます。詳しくは、プロジェクトディレクトリ内の src/utils/theme/themeEngine.ts ファイルを参照してください。