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

> Apprenez à créer un thème en utilisant CSS Tailwind avec ACUL

# Créer un thème avec Tailwind

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

  * Un tenant de développement Auth0 configuré avec la [Connexion universelle](/docs/fr-ca/authenticate/login/auth0-universal-login) et un [domaine personnalisé](/docs/fr-ca/customize/custom-domains).
  * Une [Application First Party](/docs/fr-ca/get-started/auth0-overview/create-applications#create-applications).
  * Activer [l'Authentification Identifier First](/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).
  * D'examiner le [guide de démarrage rapide ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/quickstart)
</Card>

La Connexion universelle fournit un certain nombre d'[invites](/docs/fr-ca/customize/login-pages/universal-login/customize-signup-and-login-prompts#terminology), ou d'étapes dans le processus d'authentification, chaque étape inclut 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 de 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 en utilisant [Tailwind CSS v4](https://tailwindcss.com/docs/installation/using-vite).

Toutes les personnalisations de thème et de branding se trouvent dans le répertoire `src/index.css` du projet ACUL.

1. Utilisez l'outil Auth0 CLI pour créer un projet ACUL avec les écrans pour 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 {
  /* Change these CSS variables to match your brand's primary color */
  --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 sur le style par défaut de la Connexion universelle et sont automatiquement remplacées par le thème de Branding défini dans votre tenant lors de l'exécution. Pour en savoir plus, lisez le fichier src/utils/theme/themeEngine.ts dans le répertoire de votre projet.
</Callout>