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

> Créez un thème Universal Login avec Tailwind CSS à l’aide d’Auth0 ACUL afin de personnaliser l’expérience de connexion selon le style de votre application principale.

# Créer un thème avec Tailwind

<Card title="Avant de commencer">
  Vous aurez besoin de :

  * Un tenant de développement Auth0 configuré avec [Universal Login](/docs/fr-ca/authenticate/login/auth0-universal-login) et un [domaine personnalisé](/docs/fr-ca/customize/custom-domains).
  * Une [application propriétaire Auth0](/docs/fr-ca/get-started/auth0-overview/create-applications#create-applications).
  * Activer [Identifier First Authentication](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) dans votre tenant Auth0.
  * [Node.js](http://Node.js) V22+
  * [L’outil Auth0 CLI](https://github.com/auth0/auth0-cli) [authentifié auprès de votre tenant existant](https://github.com/auth0/auth0-cli?tab=readme-ov-file#authenticating-to-your-tenant).
  * Consulter le [guide Quickstart d’ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/quickstart)
</Card>

Universal Login propose un certain nombre de [prompts](/docs/fr-ca/customize/login-pages/universal-login/customize-signup-and-login-prompts#terminology), c’est-à-dire des étapes du processus d’authentification, et chaque étape comprend au moins un écran. Vous pouvez utiliser ACUL pour appliquer un thème à tous vos écrans personnalisés.

Par exemple :

<Frame>![capture d’écran de référence login-id](https://cdn2.auth0.com/docs/1.14516.0/media/articles/universal-login/text-customization/login-id.png)</Frame>

Vous pouvez appliquer un thème à cet écran de connexion à l’aide de [Tailwind CSS v4](https://tailwindcss.com/docs/installation/using-vite).

Toutes les personnalisations de thème et d’image de marque se trouvent dans le fichier `src/index.css` du projet ACUL.

1. Utilisez l’outil Auth0 CLI pour créer un projet ACUL avec les écrans auxquels appliquer un nouveau thème.

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

2. Modifiez le fichier CSS `src/index.css`.

```css theme={null}
/* Dans src/index.css */
:root {
  /* Modifiez ces variables CSS pour qu'elles correspondent à la couleur principale de votre image de marque */
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);

  /* Remplacez les variables du thème pour référencer votre couleur personnalisée*/  
  --color-primary-button: var(--ul-theme-color-primary-button);

  /* Vous pouvez aussi remplacer directement les couleurs de composants spécifiques */
  --color-header: var(--primary-foreground);
  --color-body-text: #000000;
  --color-widget-bg: white;
  --color-widget-border: transparent;
  /* ... et bien d'autres */
}
```

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Les variables CSS du bloc `@theme inline` sont utilisées par les composants de base.
  Les variables CSS préfixées par `--ul-theme-` correspondent au style par défaut d’Universal Login et sont automatiquement remplacées par le thème Branding configuré dans votre tenant lors de l’exécution. Pour en savoir plus, consultez le fichier `src/utils/theme/themeEngine.ts` dans le répertoire de votre projet.
</Callout>