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):
  • Elemento activo en un desplegable de navegación: nav-dropdown-item[data-active]
  • Pestaña activa en la navegación móvil: mobile-nav-tabs-item[data-active]
  • Grupo activo de la barra lateral: sidebar-group[data-active]
  • Enlace activo de la barra lateral: #sidebar-content li[data-active]
  • Pestaña activa de la navegación superior: .nav-tabs-item[data-active] — 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.
  • Elemento activo de la tabla de contenidos: toc-item[data-active]
  • Elemento más profundo activo de la tabla de contenidos: 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.
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.
  • Contenedor de diagrama Mermaid: [data-component-name="mermaid-container"] — incluye la superposición de controles de zoom
  • Controles de zoom y desplazamiento de Mermaid: [data-component-name="mermaid-controls-wrapper"]
  • Botón principal del encabezado: [data-component-name="primary-header-button"] — solo en el tema Sequoia
  • Interruptor de tema: [data-component-name="theme-toggle"]
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.