Saltar al contenido principal
Usa CSS para dar estilo a los elementos HTML o agrega CSS y JavaScript personalizados para adaptar por completo el aspecto y la experiencia de tu documentación.

​
Estiliza con Tailwind CSS

Usa Tailwind CSS v3 para dar estilo a elementos HTML. Puedes controlar el diseño, el espaciado, los colores y otras propiedades visuales. Algunas clases comunes son:
  • w-full - Ancho completo
  • aspect-video - Relación de aspecto 16:9
  • rounded-xl - Esquinas redondeadas grandes
  • block, hidden - Control de visualización
  • dark:hidden, dark:block - Visibilidad en modo oscuro
Los valores arbitrarios de Tailwind CSS no están admitidos. Para valores personalizados, usa la prop style. 
<img style={{ width: '350px', margin: '12px auto' }} src="/path/image.jpg" />
Usar la prop style puede causar un desplazamiento del diseño al cargar la página, especialmente en páginas en modo personalizado. En su lugar, usa clases de Tailwind CSS o archivos CSS personalizados para evitar desplazamientos o parpadeos.

​
Añadir CSS personalizado

Añade archivos CSS a tu repositorio y los nombres de clase que definas en ellos se aplicarán y estarán disponibles en todos tus archivos MDX. Las referencias y el estilo de los elementos comunes están sujetos a cambios. Usa estilos personalizados con precaución, ya que pueden producirse cambios incompatibles en futuras actualizaciones. Por ejemplo, puedes agregar el siguiente archivo style.css para personalizar los estilos de la barra de navegación y el pie de página. 
#navbar {
  background: #fffff2;
  padding: 1rem;
}

footer {
  margin-top: 2rem;
}
Mintlify expone dos tipos de hooks CSS para segmentación:
  • Selectores de ID: elementos únicos a nivel de página que se apuntan con #value { } en CSS
  • Selectores de elemento: elementos de componente y diseño que se apuntan con value { } en CSS (sin prefijo # o .)
Usa Inspeccionar elemento para encontrar referencias a los elementos que quieres personalizar.

​
Selectores de ID

Cada ID aparece una vez por página. Úsalos como #value en CSS. Por ejemplo, #navbar { background: red; }.
  • #body-content — Contenedor exterior del cuerpo de la página.
  • #content-area — Área de contenido principal, excluyendo la barra lateral y la tabla de contenidos.
  • #content — Elemento de contenido interno dentro del área de contenido.
  • #header — Elemento de encabezado a nivel de página.
  • #banner — Banner de anuncios que se muestra sobre la barra de navegación.
  • #footer — Pie de página. También se puede apuntar como selector de elemento: footer.
  • #page-title — El encabezado <h1> en la parte superior de cada página.
  • #pagination — Barra de paginación inferior con enlaces a la página anterior y siguiente.
  • #panel — Panel flotante superpuesto. También se puede apuntar como selector de elemento: panel.
  • #background-color — Elemento de color de fondo de la página.
  • #sidebar — Panel de navegación de la barra lateral.
  • #sidebar-content — Área de contenido con desplazamiento dentro de la barra lateral.
  • #table-of-contents — Panel de tabla de contenidos en el lado derecho de la página.
  • #table-of-contents-layout — Contenedor de diseño para la tabla de contenidos.
  • #table-of-contents-content — Contenido con desplazamiento dentro de la tabla de contenidos.
  • #search-bar-entry — Disparador de la barra de búsqueda en la barra superior.
  • #search-bar-entry-mobile — Disparador de la barra de búsqueda en móvil.
  • #search-input — Campo de entrada de texto dentro del modal de búsqueda.
  • #assistant-entry — Botón del asistente IA en la barra superior.
  • #assistant-entry-mobile — Botón del asistente IA en móvil.
  • #chat-assistant-sheet — Panel del chat del asistente IA.
  • #chat-assistant-textarea — Entrada de texto dentro del panel del asistente IA.
  • #request-example — Panel de ejemplo de solicitud en el playground de API.
  • #response-example — Panel de ejemplo de respuesta en el playground de API.
  • #api-playground-input — Sección de entrada del playground de API.
  • #endpoints-menu-trigger — Botón que abre el desplegable del selector de endpoints.
  • #ask-ai-code-block-button — Botón “Ask AI” que aparece en los bloques de código.
  • #code-snippet-feedback-button — Botón de retroalimentación en los fragmentos de código.
  • #code-snippet-feedback-textarea — Área de texto dentro del formulario de retroalimentación de fragmentos de código.
  • #feedback-thumbs-up — Botón de pulgar arriba en la parte inferior de la página.
  • #feedback-thumbs-down — Botón de pulgar abajo en la parte inferior de la página.
  • #feedback-form — Formulario de retroalimentación mostrado después de una respuesta negativa.
  • #feedback-form-input — Campo de texto dentro del formulario de retroalimentación.
  • #feedback-form-cancel — Botón de cancelar dentro del formulario de retroalimentación.
  • #feedback-form-submit — Botón de enviar dentro del formulario de retroalimentación.
  • #localization-select-trigger — Botón que abre el selector de idioma.
  • #localization-select-content — Contenido del desplegable del selector de idioma.
  • #localization-select-item — Opción individual de idioma dentro del selector.
  • #changelog-filters — Controles de filtro en una página de registro de cambios.
  • #changelog-filters-content — Área de contenido dentro del panel de filtros del registro de cambios.
  • #multi-view-dropdown — Desplegable para cambiar entre vistas de documentación.
  • #text-selection-tooltip — Tooltip que aparece al seleccionar texto en la página.
  • #text-selection-tooltip-button — Botón de acción dentro del tooltip de selección de texto.

​
Selectores de elemento

Pueden aparecer múltiples instancias de estos elementos en una página. Úsalos como value en CSS. Por ejemplo, accordion { border: 1px solid red; }.
  • accordion — Elemento de acordeón desplegable.
  • accordion-group — Contenedor que agrupa múltiples acordeones.
  • callout — Bloque de llamada de atención (Note, Warning, Tip, etc.).
  • card — Elemento de tarjeta individual.
  • card-group — Contenedor que agrupa múltiples tarjetas. Obsoleto a favor de columns, pero conservado por compatibilidad.
  • columns — Contenedor de diseño multicolumna.
  • code-block — Elemento de bloque de código.
  • code-block-icon — Icono mostrado en el encabezado de un bloque de código.
  • code-group — Grupo con pestañas de bloques de código.
  • expandable — Elemento de sección expandible.
  • frame — Contenedor de marco para imágenes o contenido incrustado.
  • icon — Elemento de icono en línea.
  • mermaid — Contenedor de diagrama Mermaid.
  • step — Paso individual dentro de una secuencia de pasos.
  • steps — Contenedor de pasos numerados.
  • tab-icon — Icono mostrado dentro de una pestaña.
  • tabs — Contenedor de contenido con pestañas.
  • tile — Elemento de componente tile.
  • tooltip — Elemento de tooltip.
  • update — Entrada de actualización del registro de cambios.
  • mdx-content — Área de contenido MDX renderizado.
  • panel — Componente de panel flotante. También se puede apuntar como selector de ID: #panel.
  • eyebrow — Pequeña etiqueta que se muestra sobre el título de la página.
  • link — Elemento de enlace anchor.
  • breadcrumb-list — Lista de navegación por migas de pan.
  • breadcrumb-item — Elemento individual de miga de pan.
  • nav-dropdown-trigger — Botón que abre un desplegable de navegación.
  • nav-dropdown-content — Contenedor de contenido de un desplegable de navegación.
  • nav-dropdown-item — Elemento individual dentro de un desplegable de navegación.
  • nav-dropdown-item-text-container — Contenedor de texto dentro de un elemento del desplegable.
  • nav-dropdown-item-title — Texto del título dentro de un elemento del desplegable.
  • nav-dropdown-item-description — Texto de descripción dentro de un elemento del desplegable.
  • nav-dropdown-item-icon — Icono dentro de un elemento del desplegable.
  • nav-dropdown-products-selector-trigger — Botón que abre el desplegable del selector de productos.
  • nav-dropdown-products-selector-content — Contenedor de contenido del selector de productos.
  • nav-dropdown-products-selector-item — Producto individual en el selector.
  • nav-dropdown-products-selector-item-title — Título de un elemento del selector de productos.
  • nav-dropdown-products-selector-item-description — Descripción de un elemento del selector de productos.
  • nav-dropdown-products-selector-item-icon — Icono de un elemento del selector de productos.
  • sidebar-group — Grupo de enlaces relacionados en la barra lateral.
  • sidebar-group-icon — Icono de un grupo de la barra lateral.
  • sidebar-group-header — Etiqueta de encabezado de un grupo de la barra lateral.
  • sidebar-title — Título de nivel superior en la barra lateral.
  • sidebar-nav-group-divider — Divisor entre grupos de navegación de la barra lateral.
  • toc — Contenedor de la tabla de contenidos.
  • toc-item — Entrada individual de encabezado en la tabla de contenidos.
  • footer — Pie de página estándar. También se puede apuntar como selector de ID: #footer.
  • advanced-footer — Pie de página extendido con columnas o contenido adicional.
  • pagination-prev — Enlace a la página anterior en la barra de paginación.
  • pagination-next — Enlace a la página siguiente en la barra de paginación.
  • pagination-title — Título de página que se muestra en la barra de paginación.
  • api-section — Sección completa para un endpoint de API.
  • api-section-heading — Área de encabezado de una sección de endpoint de API.
  • api-section-heading-title — Título dentro del encabezado de una sección de endpoint de API.
  • api-section-heading-subtitle — Subtítulo dentro del encabezado de una sección de endpoint de API.
  • field — Campo de parámetro o propiedad en la referencia de API.
  • option-dropdown — Desplegable para seleccionar entre opciones de API.
  • tryit-button — Botón “Try it” que abre el playground de API.
  • method-pill — Insignia de método HTTP (GET, POST, etc.) en un endpoint.
  • method-nav-pill — Insignia de método HTTP que se muestra en la navegación de la barra lateral.
  • prompt — Componente de prompt en la referencia de API.
  • chat-assistant-sheet — Contenedor del panel del asistente IA.
  • chat-assistant-sheet-header — Encabezado del panel del asistente IA.
  • chat-assistant-sheet-content — Área de contenido del panel del asistente IA.
  • chat-assistant-input — Entrada de texto dentro del panel del asistente IA.
  • chat-assistant-floating-input — Variante de entrada flotante del asistente IA.
  • chat-assistant-send-button — Botón de enviar en el panel del asistente IA.
  • chat-assistant-disclaimer-text — Texto de descargo de responsabilidad en el panel del asistente IA.
  • chat-assistant-payload-item — Mensaje o resultado individual en el panel del asistente.
  • starter-question-text — Pregunta sugerida de inicio mostrada en un panel de asistente vacío.
  • feedback-toolbar — Barra de herramientas que contiene controles de retroalimentación de la página.
  • contextual-feedback-container — Contenedor para retroalimentación contextual en línea.
  • contextual-feedback-form — Formulario de retroalimentación contextual en línea.
  • contextual-feedback-form-title — Título del formulario de retroalimentación contextual.
  • contextual-feedback-input — Campo de texto dentro del formulario de retroalimentación contextual.
  • contextual-feedback-button — Botón de acción dentro del formulario de retroalimentación contextual.
  • contextual-feedback-form-submit-button — Botón de envío del formulario de retroalimentación contextual.
  • code-snippet-feedback-popover-content — Contenido del popover para retroalimentación de fragmentos de código.
  • code-snippet-feedback-form — Formulario de retroalimentación para un fragmento de código.
  • code-snippet-feedback-textarea — Área de texto dentro del formulario de retroalimentación del fragmento de código.
  • code-snippet-feedback-form-title — Título del formulario de retroalimentación del fragmento de código.
  • code-snippet-feedback-form-description — Texto descriptivo en el formulario de retroalimentación del fragmento de código.
  • code-snippet-feedback-form-submit-button — Botón de envío del formulario de retroalimentación del fragmento de código.
  • login-link — Enlace que inicia el flujo de inicio de sesión.
  • logout-link — Enlace que inicia el flujo de cierre de sesión.
  • multi-view-item — Opción de vista individual en un conmutador de multi-vista.
  • multi-view-dropdown — Desplegable para seleccionar entre múltiples vistas.
  • multi-view-dropdown-trigger — Botón que abre el desplegable de multi-vista.
  • multi-view-dropdown-content — Área de contenido del desplegable de multi-vista.
  • multi-view-dropdown-item — Elemento individual dentro del desplegable de multi-vista.
  • directory — Contenedor raíz para una página de directorio.
  • directory-group — Grupo de páginas relacionadas dentro de un directorio.
  • directory-page — Entrada de página individual en un directorio.
  • directory-card — Entrada de página tipo tarjeta en un directorio.
  • not-found-container — Contenedor raíz de la página 404.
  • not-found-status-code — Visualización del código de estado en la página 404.
  • not-found-title — Encabezado del título en la página 404.
  • not-found-description — Texto descriptivo en la página 404.
  • not-found-recommended-pages-list — Lista de páginas recomendadas mostradas en la página 404.
  • not-found-recommended-page-link — Enlace individual en la lista de páginas recomendadas.
  • color — Elemento de muestra de color.
  • color-row — Fila que agrupa muestras de color.
  • color-item — Elemento de color individual dentro de una fila de colores.
  • tree — Contenedor de árbol de archivos.
  • tree-folder — Entrada de carpeta dentro de un árbol de archivos.
  • tree-file — Entrada de archivo dentro de un árbol de archivos.
Algunos elementos exponen atributos de datos que puedes usar como selectores CSS.Estado activo (data-active):
  • nav-dropdown-item[data-active] — Elemento activo en un desplegable de navegación.
  • mobile-nav-tabs-item[data-active] — Pestaña activa en la navegación móvil.
  • sidebar-group[data-active] — Grupo activo de la barra lateral.
  • #sidebar-content li[data-active] — Enlace activo de la barra lateral.
  • .nav-tabs-item[data-active] — Pestaña activa de la navegación superior. Solo se aplica a pestañas simples; las pestañas con menús desplegables no reciben data-active. Nota el . inicial: esto apunta a una clase en un elemento <a> estándar, a diferencia de la mayoría de los otros componentes que usan nombres de elementos personalizados.
  • toc-item[data-active] — Elemento activo de la tabla de contenidos.
  • toc-item[data-active-deepest] — Elemento más profundo activo de la tabla de contenidos. Solo presente en el encabezado exacto actualmente visible, a diferencia de data-active que también se establece en sus encabezados padres.
Nombre de componente (data-component-name):Usa data-component-name para apuntar a componentes de interfaz específicos con un selector estable que persiste si los nombres de clases internos cambian.
  • [data-component-name="mermaid-container"] — Contenedor de diagrama Mermaid, incluyendo la superposición de controles de zoom.
  • [data-component-name="mermaid-controls-wrapper"] — Controles de zoom y desplazamiento de Mermaid.
  • [data-component-name="primary-header-button"] — Botón principal del encabezado. Solo en el tema Sequoia.
  • [data-component-name="theme-toggle"] — Interruptor de tema.
Parte de componente (data-component-part):Usa data-component-part para apuntar a sub-elementos dentro de un componente.
  • [data-component-part="contact-support-button"] — El wrapper <a> alrededor del enlace de contacto de soporte en el panel del asistente.
  • [data-component-part="contact-support-icon"] — El <span> que envuelve el icono.
  • [data-component-part="contact-support-text"] — El elemento <p> que contiene la etiqueta.
Atributos de Badge:
  • [data-badge] — Cualquier elemento de badge.
  • [data-badge][data-color="blue"] — Badge filtrado por color.
  • [data-badge][data-size="sm"] — Badge filtrado por tamaño.

​
JavaScript personalizado

El JavaScript personalizado te permite agregar código ejecutable a nivel global. Es equivalente a insertar una etiqueta <script> con código JS en cada página. Mintlify incluye cualquier archivo .js dentro de tu directorio de contenido en cada página de tu sitio de documentación. Por ejemplo, puedes agregar el archivo ga.js siguiente para habilitar Google Analytics en toda la documentación. 
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TAG_ID');
Úsalo con precaución para no introducir vulnerabilidades de seguridad.