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

> ACUL を使用して Tailwind CSS でテーマを作成する方法を学ぶ

# Tailwind でテーマを作成する

<Card title="開始する前に">
  次のものが必要です:

  * [Universal Login](/docs/ja-JP/authenticate/login/auth0-universal-login) と [カスタムドメイン](/docs/ja-JP/customize/custom-domains) が構成された Auth0 開発テナント。
  * Auth0 の [First Party Application](/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) バージョン 22 以上
  * [Auth0 CLI ツール](https://github.com/auth0/auth0-cli) が、[既存のテナントに対して認証済み](https://github.com/auth0/auth0-cli?tab=readme-ov-file#authenticating-to-your-tenant)であること。
  * [ACUL クイックスタートガイド](/docs/ja-JP/customize/login-pages/advanced-customizations/quickstart) に目を通していること
</Card>

Universal Login は、認証プロセス内のステップとなる複数の [prompts](/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) を使用して、このログイン画面にテーマを適用できます。

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