mintlify__docs/es/customize/custom-scripts.mdx

---
title: "Scripts personalizados"
description: "Agrega JavaScript y CSS personalizados para adaptar por completo el aspecto y la experiencia de tu documentación."
keywords: ["CSS", "JavaScript", "Tailwind CSS", "personalización de estilo"]
---

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.

<div id="styling-with-tailwind-css">
  ## Estilizado con Tailwind CSS
</div>

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

```html
<img style={{ width: '350px', margin: '12px auto' }} src="/path/image.jpg" />
```

<Warning>
  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.
</Warning>


<div id="custom-css">
  ## CSS personalizado
</div>

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.

<div id="adding-stylecss">
  ### Agregar `style.css`
</div>

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.

```css
#navbar {
  background: #fffff2;
  padding: 1rem;
}

footer {
  margin-top: 2rem;
}
```


<div id="using-identifiers-and-selectors">
  ### Uso de identificadores y selectores
</div>

Mintlify cuenta con un conjunto de identificadores y selectores comunes para ayudarte a etiquetar elementos importantes de la interfaz.

<Tip>
  Usa Inspeccionar elemento para encontrar referencias a los elementos que quieres personalizar.
</Tip>

<AccordionGroup>
  <Accordion title="Identificadores">
    * 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 title="Selectores">
    * 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`
  </Accordion>
</AccordionGroup>

<Warning>
  Las referencias y el estilo de los elementos comunes pueden cambiar a medida que la plataforma evoluciona. Utiliza estilos personalizados con precaución.
</Warning>

<div id="custom-javascript">
  ## JavaScript personalizado
</div>

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.

<div id="adding-custom-javascript">
  ### Agregar JavaScript personalizado
</div>

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](https://marketingplatform.google.com/about/analytics) de Google en toda la documentación.

```js
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TAG_ID');
```

<Warning>
  Úsalo con precaución para no introducir vulnerabilidades de seguridad.
</Warning>