> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

# Tailwind でテーマを作成する

<Card title="始める前に">
  必要なもの:

  * [Universal Login](/docs/ja-jp/authenticate/login/auth0-universal-login) と [カスタムドメイン](/docs/ja-jp/customize/custom-domains) が設定された Auth0 開発用テナント
  * Auth0 の[ファーストパーティアプリケーション](/docs/ja-jp/get-started/auth0-overview/create-applications#create-applications)
  * Auth0 テナントで [Identifier First Authentication](/docs/ja-jp/authenticate/login/auth0-universal-login/identifier-first) を有効にしておくこと
  * [Node.js](http://Node.js) V22+
  * [既存のテナントに対して認証済み](https://github.com/auth0/auth0-cli?tab=readme-ov-file#authenticating-to-your-tenant) の [Auth0 CLI](https://github.com/auth0/auth0-cli)
  * [ACUL Quickstart ガイド](/docs/ja-jp/customize/login-pages/advanced-customizations/quickstart)に目を通しておくこと
</Card>

Universal Login には、認証プロセスの各ステップにあたる複数の[プロンプト](/docs/ja-jp/customize/login-pages/universal-login/customize-signup-and-login-prompts#terminology)があり、それぞれのステップには少なくとも 1 つの画面が含まれます。ACUL を使うと、すべてのカスタム画面にテーマを適用できます。

例えば:

<Frame>![login-id reference screenshot](https://cdn2.auth0.com/docs/1.14516.0/media/articles/universal-login/text-customization/login-id.png)</Frame>

[Tailwind CSS v4](https://tailwindcss.com/docs/installation/using-vite) を使って、この Login 画面にテーマを適用できます。

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

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

```bash theme={null}
auth0 acul init <Your-App-Name>
```

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

```css theme={null}
/* 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;
  /* ... その他多数 */
}
```

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