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

> Apprenez à créer un thème à l'aide de Tailwind CSS avec ACUL

# 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 [First Party Application](/docs/fr-CA/get-started/auth0-overview/create-applications#create-applications) Auth0.
  * Activez [Identifier First Authentication](/docs/fr-CA/authenticate/login/auth0-universal-login/identifier-first) dans votre tenant Auth0.
  * [Node.js](http://Node.js) v22 ou version ultérieure.
  * L'[Auth0 CLI Tool](https://github.com/auth0/auth0-cli) [authentifié pour votre tenant existant](https://github.com/auth0/auth0-cli?tab=readme-ov-file#authenticating-to-your-tenant).
  * Passez en revue le [guide de Démarrage rapide ACUL](/docs/fr-CA/customize/login-pages/advanced-customizations/quickstart)
</Card>

Universal Login propose un certain nombre de [messages d'invite (prompts)](/docs/fr-CA/customize/login-pages/universal-login/customize-signup-and-login-prompts#terminology), ou d'é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 de branding se trouvent dans le fichier `src/index.css` du projet ACUL.

1. Utilisez l'outil Auth0 CLI pour créer un projet ACUL contenant 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}
/* In src/index.css */
:root {
  /* Modifiez ces variables CSS pour qu'elles correspondent à la couleur principale de votre marque */
  --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 */
}
```

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