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

> Découvrez comment créer un thème avec Tailwind CSS à l’aide d’ACUL

# Créer un thème avec Tailwind

<Card title="Avant de commencer">
  Vous aurez besoin des éléments suivants :

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

Universal Login propose plusieurs [invites](/fr-CA/docs/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 Login à 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 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 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-` sont définies selon le style par défaut de Universal Login et sont automatiquement surchargées par le thème d’image de marque configuré dans votre locataire au moment de l’exécution. Pour en savoir plus, consultez le fichier `src/utils/theme/themeEngine.ts` dans le répertoire de votre projet.
</Callout>