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

​
Estilizado 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" />

​
CSS personalizado

Agrega archivos CSS a tu repositorio y los nombres de clase definidos 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 el estilo 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
  • 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
  • Footer: footer
  • Header: header
  • NavBarTransition: navbar-transition
  • NavigationItems: navigation-items
  • Navbar: navbar
  • PageContextMenu: page-context-menu
  • PageContextMenuButton: page-context-menu-button
  • PageTitle: page-title
  • Paginación: 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
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

Cualquier archivo .js dentro del directorio de contenido de tu documentación se incluirá en cada página. 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.
⌘I