Créer un thème avec Tailwind

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.

Avant de commencer

Vous aurez besoin de :

• Un tenant de développement Auth0 configuré avec Universal Login et un domaine personnalisé.
• Une application propriétaire Auth0.
• Activer Identifier First Authentication dans votre tenant Auth0.
• Node.js V22+
• L’outil Auth0 CLI authentifié auprès de votre tenant existant.
• Consulter le guide Quickstart d’ACUL

Universal Login propose un certain nombre de prompts, 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 :

Vous pouvez appliquer un thème à cet écran de connexion à l’aide de Tailwind CSS v4.

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.

auth0 acul init <Your-App-Name>

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

/* 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 */
}

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.