Tailwindを使ってテーマを作成する

ACULでTailwind CSSを使ってテーマを作成する方法について学ぶ

Before you start

以下が必要です。

• ユニバーサルログインとカスタムドメインが構成されたAuth0開発テナント。
• Auth0のファーストパーティアプリケーション。
• Auth0テナントでIdentifier First認証が有効になっていること。
• Node.js V22+
• Auth0 CLIツールが既存のテナントに認証済みであること。
• ACULクイックスタートガイドを確認すること。

ユニバーサルログインでは、認証プロセスのステップであるプロンプトがいくつも提供されており、各ステップには1つ以上の画面があります。ACULを使用すると、すべてのカスタム画面にテーマを適用できます。

以下に例を示します。

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

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

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

auth0 acul init <Your-App-Name>

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

/* In src/index.css */
:root {
  /* Change these CSS variables to match your brand's primary color */
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);

  /* Override the theme variables to reference your custom color*/  
  --color-primary-button: var(--ul-theme-color-primary-button);

  /* You can also override specific component colors directly */
  --color-header: var(--primary-foreground);
  --color-body-text: #000000;
  --color-widget-bg: white;
  --color-widget-border: transparent;
  /* ... and many more */
}

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