Create a theme with Tailwind

Learn how to create a theme using tailwind CSS with ACUL

Before you start

You need:

• An Auth0 development tenant configured with Universal Login and a custom domain.
• An Auth0 First Party Application.
• Enable Identifier First Authentication in your Auth0 tenant.
• Node.js V22+
• The Auth0 CLI Tool authenticated to your existing tenant.
• To review the ACUL Quickstart guide

Universal Login provides a number of prompts, or steps in the authentication process, each step includes at least one screen. You can use ACUL to apply a theme to all your custom screens.

For example:

You can apply a theme to this Login screen using Tailwind CSS v4.

All theme and branding customizations are located in ACUL project src/index.css directory.

1. Use the Auth0 CLI tool to create an ACUL project with the screens to apply a new theme.

auth0 acul init <Your-App-Name>

2. Edit the CSS file src/index.css.

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

CSS variables in the @theme inline block are used by the base components. CSS variables prefixed with --ul-theme- are set to the default Universal Login styling and are automatically overridden by the Branding theme set in your tenant at runtime. To learn more, read the src/utils/theme/themeEngine.ts file in your project’s directory.