Usa CSS para dar estilo a elementos HTML o agrega CSS y JavaScript personalizados para ajustar por completo el aspecto y la experiencia de tu documentación.

Estilos 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 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 que definas 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 incluye 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.
Las referencias y el estilo de los elementos comunes están sujetos a cambios a medida que la plataforma evolucione. 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 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 siguiente archivo ga.js 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 no introducir vulnerabilidades de seguridad.