Créer un thème avec Tailwind

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

Avant de commencer

Vous aurez besoin des éléments suivants :

• Un locataire de développement Auth0 configuré avec Universal Login et un domaine personnalisé.
• Une application propriétaire Auth0.
• Que l’authentification Identifier First soit activée dans votre locataire Auth0.
• Node.js V22+
• Auth0 CLI authentifié auprès de votre locataire existant.
• Avoir consulté le guide de démarrage rapide ACUL

Universal Login propose plusieurs invites, 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 Login à 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 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 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- 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.