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

​
Estilos con Tailwind CSS

Usa Tailwind CSS v3 para dar estilo a elementos HTML. Puedes controlar el layout, 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 son compatibles. 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 añadir el siguiente archivo style.css para personalizar 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 la herramienta 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
  • 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
Las referencias y el estilo de los elementos comunes están sujetos a cambios a medida que la plataforma evoluciona. Usa estilos personalizados con precaución.

​
JavaScript personalizado

El JavaScript personalizado te permite agregar código ejecutable de forma global. Es equivalente a añadir una etiqueta <script> con código JavaScript en cada página.

​
Añadir JavaScript personalizado

Cualquier archivo .js dentro del directorio de contenido de tu documentación se incluirá en todas las páginas. Por ejemplo, puedes añadir 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 evitar introducir vulnerabilidades de seguridad.