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.

​
Agregar style.css

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;
}

​
Uso de identificadores y selectores

Mintlify cuenta con un conjunto de identificadores y selectores comunes para ayudarte a etiquetar elementos importantes de la interfaz.
Usa Inspeccionar elemento para encontrar referencias a los elementos que quieres personalizar.
  • APIPlaygroundInput: api-playground-input
  • AssistantEntry: assistant-entry
  • AssistantEntryMobile: assistant-entry-mobile
  • Banner: banner
  • BodyContent: body-content
  • ChangelogFilters: changelog-filters
  • ChangelogFiltersContent: changelog-filters-content
  • ChatAssistantSheet: chat-assistant-sheet
  • ChatAssistantTextArea: chat-assistant-textarea
  • ContentArea: content-area
  • ContentContainer: content-container
  • ContentSideLayout: content-side-layout
  • FeedbackForm: feedback-form
  • FeedbackFormCancel: feedback-form-cancel
  • FeedbackFormInput: feedback-form-input
  • FeedbackFormSubmit: feedback-form-submit
  • FeedbackThumbsDown: feedback-thumbs-down
  • FeedbackThumbsUp: feedback-thumbs-up
  • Footer: footer
  • Header: header
  • NavBarTransition: navbar-transition
  • NavigationItems: navigation-items
  • Navbar: navbar
  • PageContextMenu: page-context-menu
  • PageContextMenuButton: page-context-menu-button
  • PageTitle: page-title
  • Pagination: pagination
  • Panel: panel
  • RequestExample: request-example
  • ResponseExample: response-example
  • SearchBarEntry: search-bar-entry
  • SearchBarEntryMobile: search-bar-entry-mobile
  • SearchInput: search-input
  • Sidebar: sidebar
  • SidebarContent: sidebar-content
  • TableOfContents: table-of-contents
  • TableOfContentsContent: table-of-contents-content
  • TableOfContentsLayout: table-of-contents-layout
  • TopbarCtaButton: topbar-cta-button
  • Accordion: accordion
  • AccordionGroup: accordion-group
  • AlmondLayout: almond-layout
  • AlmondNavBottomSection: almond-nav-bottom-section
  • AlmondNavBottomSectionDivider: almond-nav-bottom-section-divider
  • Anchor: nav-anchor
  • Anchors: nav-anchors
  • APISection: api-section
  • APISectionHeading: api-section-heading
  • APISectionHeadingSubtitle: api-section-heading-subtitle
  • APISectionHeadingTitle: api-section-heading-title
  • Callout: callout
  • Card: card
  • CardGroup: card-group
  • ChatAssistantSheet: chat-assistant-sheet
  • ChatAssistantSheetHeader: chat-assistant-sheet-header
  • ChatAssistantSheetContent: chat-assistant-sheet-content
  • ChatAssistantInput: chat-assistant-input
  • ChatAssistantSendButton: chat-assistant-send-button
  • CodeBlock: code-block
  • CodeGroup: code-group
  • Content: mdx-content
  • DropdownTrigger: nav-dropdown-trigger
  • DropdownContent: nav-dropdown-content
  • DropdownItem: nav-dropdown-item
  • DropdownItemTextContainer: nav-dropdown-item-text-container
  • DropdownItemTitle: nav-dropdown-item-title
  • DropdownItemDescription: nav-dropdown-item-description
  • DropdownItemIcon: nav-dropdown-item-icon
  • Expandable: expandable
  • Eyebrow: eyebrow
  • FeedbackToolbar: feedback-toolbar
  • Field: field
  • Frame: frame
  • Icon: icon
  • Link: link
  • LoginLink: login-link
  • Logo: nav-logo
  • Mermaid: mermaid
  • MethodNavPill: method-nav-pill
  • MethodPill: method-pill
  • NavBarLink: navbar-link
  • NavTagPill: nav-tag-pill
  • NavTagPillText: nav-tag-pill-text
  • OptionDropdown: option-dropdown
  • PaginationNext: pagination-next
  • PaginationPrev: pagination-prev
  • PaginationTitle: pagination-title
  • Panel: panel
  • SidebarGroup: sidebar-group
  • SidebarGroupIcon: sidebar-group-icon
  • SidebarGroupHeader: sidebar-group-header
  • SidebarNavGroupDivider: sidebar-nav-group-divider
  • SidebarTitle: sidebar-title
  • Step: step
  • Steps: steps
  • Tab: tab
  • Tabs: tabs
  • TabsBar: nav-tabs
  • TabsBarItem: nav-tabs-item
  • TableOfContents: toc
  • TableOfContentsItem: toc-item
  • Tooltip: tooltip
  • TopbarRightContainer: topbar-right-container
  • TryitButton: tryit-button
  • Update: update
Atributos de datosAlgunos elementos exponen atributos de datos que puedes usar como selectores CSS.Estado activo (data-active):
  • DropdownItem: nav-dropdown-item[data-active]
  • MobileNavTabsBarItem: mobile-nav-tabs-item[data-active]
  • SidebarGroup: sidebar-group[data-active]
  • SidebarNavItem: #sidebar-content li[data-active]
  • TableOfContentsItem: toc-item[data-active]
  • TableOfContentsItem (más profundo): toc-item[data-active-deepest] — solo presente en el encabezado exacto actualmente visible, a diferencia de data-active que también se establece en sus encabezados padres
Atributos de Badge:
  • Badge: [data-badge]
  • Badge por color: [data-badge][data-color="blue"]
  • Badge por tamaño: [data-badge][data-size="sm"]
Las referencias y el estilo de los elementos comunes pueden cambiar a medida que la plataforma evoluciona. Utiliza estilos personalizados con precaución.

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

​
Agregar JavaScript personalizado

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 Analytics de Google 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.

​
Scripts externos

Carga scripts de terceros desde URLs externas en cada página de tu sitio de documentación. Es útil para agregar análisis, widgets de chat, gestores de consentimiento u otros servicios que proporcionan un script alojado. Puedes gestionar los scripts externos desde el panel de control en Settings > Add-ons > Custom scripts. Para cada script, proporciona una URL HTTPS y elige una estrategia de carga:
EstrategiaDescripción
beforeInteractiveSe carga antes de que la página sea interactiva. Úsalo para scripts que deben ejecutarse antes de cualquier interacción del usuario, como consentimiento de cookies o análisis críticos.
afterInteractiveSe carga después de que la página sea interactiva. Este es el comportamiento predeterminado cuando no se especifica una estrategia.
lazyOnloadSe carga durante el tiempo de inactividad después de la carga de la página. Úsalo para scripts de baja prioridad como widgets de chat o seguimiento no esencial.
Puedes agregar hasta 20 scripts personalizados. Cada URL debe usar HTTPS y no debe apuntar a tipos de archivo no permitidos como .svg, .exe o .zip.