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

> Aprende a crear un tema con Tailwind CSS usando ACUL

# Crear un tema con Tailwind

<Card title="Antes de empezar">
  Necesitas:

  * Un inquilino de desarrollo de Auth0 configurado con [Universal Login](/es/docs/authenticate/login/auth0-universal-login) y un [dominio personalizado](/es/docs/customize/custom-domains).
  * Una [aplicación propia](/es/docs/get-started/auth0-overview/create-applications#create-applications) de Auth0.
  * Habilita [Autenticación con identificador primero](/es/docs/authenticate/login/auth0-universal-login/identifier-first) en tu tenant de Auth0.
  * [Node.js](http://Node.js) V22+
  * La [Auth0 CLI](https://github.com/auth0/auth0-cli) [autenticada con tu tenant existente](https://github.com/auth0/auth0-cli?tab=readme-ov-file#authenticating-to-your-tenant).
  * Revisar la guía de [Quickstart de ACUL](/es/docs/customize/login-pages/advanced-customizations/quickstart)
</Card>

Universal Login proporciona varias [pantallas](/es/docs/customize/login-pages/universal-login/customize-signup-and-login-prompts#terminology), 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:

<Frame>![captura de pantalla de referencia de login-id](https://cdn2.auth0.com/docs/1.14516.0/media/articles/universal-login/text-customization/login-id.png)</Frame>

Puedes aplicar un tema a esta pantalla de Login con [Tailwind CSS v4](https://tailwindcss.com/docs/installation/using-vite).

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.

```bash theme={null}
auth0 acul init <Your-App-Name>
```

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

```css theme={null}
/* 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 */
}
```

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  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.
</Callout>