Crear un tema con Tailwind

Aprende a crear un tema con Tailwind CSS usando ACUL

Antes de empezar

Necesitas:

• Un inquilino de desarrollo de Auth0 configurado con Universal Login y un dominio personalizado.
• Una aplicación propia de Auth0.
• Habilita Autenticación con identificador primero en tu tenant de Auth0.
• Node.js V22+
• La Auth0 CLI autenticada con tu tenant existente.
• Revisar la guía de Quickstart de ACUL

Universal Login proporciona varias pantallas, es decir, pasos del proceso de autenticación; cada paso incluye al menos una pantalla. Puedes usar ACUL para aplicar un tema a todas tus pantallas personalizadas.

Por ejemplo:

Puedes aplicar un tema a esta pantalla de Login con Tailwind CSS v4.

Todas las personalizaciones de tema y marca se encuentran en el archivo src/index.css del proyecto ACUL.

1. Usa la herramienta Auth0 CLI para crear un proyecto ACUL con las pantallas a las que quieras aplicar un tema nuevo.

auth0 acul init <Your-App-Name>

2. Edite el archivo CSS src/index.css.

/* En src/index.css */
:root {
  /* Cambia estas variables CSS para que coincidan con el color primario de tu marca */
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);

  /* Reemplaza las variables del tema para hacer referencia a tu color personalizado*/  
  --color-primary-button: var(--ul-theme-color-primary-button);

  /* También puedes reemplazar los colores de componentes específicos directamente */
  --color-header: var(--primary-foreground);
  --color-body-text: #000000;
  --color-widget-bg: white;
  --color-widget-border: transparent;
  /* ... y muchos más */
}

Los componentes base utilizan las variables CSS del bloque @theme inline. Las variables CSS con el prefijo --ul-theme- se establecen según el estilo predeterminado de Universal Login y el tema de marca configurado en tu inquilino las sustituye automáticamente en tiempo de ejecución. Para obtener más información, consulta el archivo src/utils/theme/themeEngine.ts en el directorio de tu proyecto.