> ## 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.

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

# Tailwind でテーマを作成する

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

  * [Universal Login](/ja/docs/authenticate/login/auth0-universal-login) と [カスタムドメイン](/ja/docs/customize/custom-domains) が設定された Auth0 開発テナント
  * Auth0 の [First Party Application](/ja/docs/get-started/auth0-overview/create-applications#create-applications)
  * Auth0 テナントで [Identifier First Authentication](/ja/docs/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 Tool](https://github.com/auth0/auth0-cli)
  * [ACUL クイックスタートガイド](/ja/docs/customize/login-pages/advanced-customizations/quickstart) を確認しておくこと
</Card>

Universal Login では、認証プロセス内のステップである複数の [prompt](/ja/docs/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}
/* 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>