Passer au contenu principal
Utilisez CSS pour mettre en forme les éléments HTML, ou ajoutez du CSS et du JavaScript personnalisés afin d’adapter entièrement l’apparence et l’expérience de votre documentation.

​
Styliser avec Tailwind CSS

Utilisez Tailwind CSS v3 pour styliser les éléments HTML. Vous pouvez contrôler la mise en page, l’espacement, les couleurs et d’autres propriétés visuelles. Quelques classes courantes :
  • w-full - Pleine largeur
  • aspect-video - Ratio 16:9
  • rounded-xl - Grandes bordures arrondies
  • block, hidden - Contrôle de l’affichage
  • dark:hidden, dark:block - Visibilité en mode sombre
Les valeurs arbitraires de Tailwind CSS ne sont pas prises en charge. Pour des valeurs personnalisées, utilisez plutôt la prop style. 
<img style={{ width: '350px', margin: '12px auto' }} src="/path/image.jpg" />
L’utilisation de la prop style peut provoquer un décalage de la mise en page au chargement, en particulier sur les pages en mode personnalisé. Utilisez plutôt des classes Tailwind CSS ou des fichiers CSS personnalisés pour éviter les décalages ou le scintillement.

​
Ajouter du CSS personnalisé

Ajoutez des fichiers CSS à votre référentiel pour appliquer les noms de classes qu’ils définissent et les rendre disponibles dans tous vos fichiers MDX. Les références et la mise en forme des éléments courants sont susceptibles de changer. Utilisez les styles personnalisés avec prudence, car des changements incompatibles peuvent survenir lors de futures mises à jour. Par exemple, vous pouvez ajouter le fichier style.css suivant pour personnaliser la barre de navigation et le pied de page. 
#navbar {
  background: #fffff2;
  padding: 1rem;
}

footer {
  margin-top: 2rem;
}
Mintlify expose deux types de hooks CSS pour le ciblage :
  • Sélecteurs d’ID : éléments uniques au niveau de la page ciblés avec #value { } en CSS
  • Sélecteurs d’éléments : composants et éléments de mise en page ciblés avec value { } en CSS (sans préfixe # ou .)
Utilisez l’outil d’inspection des éléments pour trouver les références aux éléments que vous souhaitez personnaliser.

​
Sélecteurs d’ID

Chaque ID apparaît une seule fois par page. Utilisez-les comme #value en CSS. Par exemple, #navbar { background: red; }.
  • #body-content — Conteneur externe du corps de la page.
  • #content-area — Zone de contenu principale, hors barre latérale et table des matières.
  • #content — Élément de contenu interne au sein de la zone de contenu.
  • #header — Élément d’en-tête au niveau de la page.
  • #banner — Bannière d’annonce affichée au-dessus de la barre de navigation.
  • #footer — Pied de page. Aussi ciblable en tant que sélecteur d’élément : footer.
  • #page-title — Le titre <h1> en haut de chaque page.
  • #pagination — Barre de pagination en bas avec les liens page précédente et suivante.
  • #panel — Panneau flottant en superposition. Aussi ciblable en tant que sélecteur d’élément : panel.
  • #background-color — Élément de couleur d’arrière-plan de la page.
  • #sidebar — Panneau de navigation de la barre latérale.
  • #sidebar-content — Zone de contenu défilable au sein de la barre latérale.
  • #table-of-contents — Panneau de la table des matières sur le côté droit de la page.
  • #table-of-contents-layout — Conteneur de mise en page pour la table des matières.
  • #table-of-contents-content — Contenu défilable au sein de la table des matières.
  • #search-bar-entry — Déclencheur de la barre de recherche dans la barre supérieure.
  • #search-bar-entry-mobile — Déclencheur de la barre de recherche sur mobile.
  • #search-input — Champ de saisie dans la fenêtre modale de recherche.
  • #assistant-entry — Bouton de l’assistant IA dans la barre supérieure.
  • #assistant-entry-mobile — Bouton de l’assistant IA sur mobile.
  • #chat-assistant-sheet — Panneau de chat de l’assistant IA.
  • #chat-assistant-textarea — Champ de saisie dans le panneau de l’assistant IA.
  • #request-example — Panneau d’exemple de requête dans le playground API.
  • #response-example — Panneau d’exemple de réponse dans le playground API.
  • #api-playground-input — Section d’entrée du playground API.
  • #endpoints-menu-trigger — Bouton qui ouvre le menu déroulant de sélection des endpoints.
  • #ask-ai-code-block-button — Bouton “Ask AI” qui apparaît sur les blocs de code.
  • #code-snippet-feedback-button — Bouton de retour d’expérience sur les extraits de code.
  • #code-snippet-feedback-textarea — Zone de texte dans le formulaire de retour d’expérience des extraits de code.
  • #feedback-thumbs-up — Bouton pouce en haut en bas de la page.
  • #feedback-thumbs-down — Bouton pouce en bas en bas de la page.
  • #feedback-form — Formulaire de retour d’expérience affiché après une réponse négative.
  • #feedback-form-input — Champ de saisie dans le formulaire de retour d’expérience.
  • #feedback-form-cancel — Bouton d’annulation dans le formulaire de retour d’expérience.
  • #feedback-form-submit — Bouton d’envoi dans le formulaire de retour d’expérience.
  • #page-context-menu — Menu d’options contextuelles pour la page actuelle.
  • #page-context-menu-button — Bouton qui déclenche le menu contextuel de la page.
  • #localization-select-trigger — Bouton qui ouvre le sélecteur de langue.
  • #localization-select-content — Contenu du menu déroulant du sélecteur de langue.
  • #localization-select-item — Option de langue individuelle dans le sélecteur.
  • #changelog-filters — Contrôles de filtre sur une page de journal des modifications.
  • #changelog-filters-content — Zone de contenu dans le panneau de filtres du journal des modifications.
  • #multi-view-dropdown — Menu déroulant pour basculer entre les vues de documentation.
  • #text-selection-tooltip — Infobulle qui apparaît lorsque du texte est sélectionné sur la page.
  • #text-selection-tooltip-button — Bouton d’action dans l’infobulle de sélection de texte.

​
Sélecteurs d’éléments

Plusieurs instances de ces éléments peuvent apparaître sur une page. Utilisez-les comme value en CSS. Par exemple, accordion { border: 1px solid red; }.
  • accordion — Élément accordéon repliable.
  • accordion-group — Conteneur regroupant plusieurs accordéons.
  • callout — Bloc d’encadré (Note, Warning, Tip, etc.).
  • card — Élément de carte individuel.
  • card-group — Conteneur regroupant plusieurs cartes. Obsolète au profit de columns, mais conservé pour la compatibilité.
  • columns — Conteneur de mise en page multi-colonnes.
  • code-block — Élément de bloc de code.
  • code-block-icon — Icône affichée dans l’en-tête d’un bloc de code.
  • code-group — Groupe d’onglets de blocs de code.
  • expandable — Élément de section extensible.
  • frame — Cadre pour les images ou le contenu intégré.
  • icon — Élément d’icône en ligne.
  • mermaid — Conteneur de diagramme Mermaid.
  • step — Étape individuelle dans une séquence d’étapes.
  • steps — Conteneur d’étapes numérotées.
  • tab-icon — Icône affichée dans un onglet.
  • tabs — Conteneur de contenu à onglets.
  • tile — Élément de composant tuile.
  • tooltip — Élément d’infobulle.
  • update — Entrée de mise à jour du journal des modifications.
  • mdx-content — Zone de contenu MDX rendu.
  • panel — Composant de panneau flottant. Aussi ciblable en tant que sélecteur d’ID : #panel.
  • eyebrow — Petit libellé affiché au-dessus du titre de la page.
  • link — Élément de lien ancré.
  • breadcrumb-list — Liste de navigation fil d’Ariane.
  • breadcrumb-item — Élément individuel du fil d’Ariane.
  • nav-dropdown-products-selector-trigger — Bouton qui ouvre le menu déroulant du sélecteur de produits.
  • nav-dropdown-products-selector-content — Conteneur de contenu du sélecteur de produits.
  • nav-dropdown-products-selector-item — Produit individuel dans le sélecteur.
  • nav-dropdown-products-selector-item-title — Titre d’un élément du sélecteur de produits.
  • nav-dropdown-products-selector-item-description — Description d’un élément du sélecteur de produits.
  • nav-dropdown-products-selector-item-icon — Icône d’un élément du sélecteur de produits.
  • sidebar-group — Groupe de liens associés dans la barre latérale.
  • sidebar-group-icon — Icône d’un groupe de la barre latérale.
  • sidebar-group-header — Libellé d’en-tête d’un groupe de la barre latérale.
  • sidebar-title — Titre de niveau supérieur dans la barre latérale.
  • sidebar-nav-group-divider — Séparateur entre les groupes de navigation de la barre latérale.
  • toc — Conteneur de la table des matières.
  • toc-item — Entrée d’en-tête individuelle dans la table des matières.
  • footer — Pied de page standard. Aussi ciblable en tant que sélecteur d’ID : #footer.
  • advanced-footer — Pied de page étendu avec des colonnes ou du contenu supplémentaire.
  • api-section — Section complète pour un endpoint d’API.
  • api-section-heading — Zone d’en-tête d’une section d’endpoint d’API.
  • api-section-heading-title — Titre au sein de l’en-tête d’une section d’endpoint d’API.
  • api-section-heading-subtitle — Sous-titre au sein de l’en-tête d’une section d’endpoint d’API.
  • field — Champ de paramètre ou de propriété dans la référence API.
  • option-dropdown — Menu déroulant pour sélectionner entre les options d’API.
  • tryit-button — Bouton “Try it” qui ouvre le playground API.
  • method-pill — Badge de méthode HTTP (GET, POST, etc.) sur un endpoint.
  • method-nav-pill — Badge de méthode HTTP affiché dans la navigation de la barre latérale.
  • prompt — Composant prompt dans la référence API.
  • chat-assistant-sheet — Conteneur du panneau de l’assistant IA.
  • chat-assistant-sheet-header — En-tête du panneau de l’assistant IA.
  • chat-assistant-sheet-content — Zone de contenu du panneau de l’assistant IA.
  • chat-assistant-input — Champ de saisie dans le panneau de l’assistant IA.
  • chat-assistant-floating-input — Variante de saisie flottante de l’assistant IA.
  • chat-assistant-send-button — Bouton d’envoi dans le panneau de l’assistant IA.
  • chat-assistant-disclaimer-text — Texte de clause de non-responsabilité dans le panneau de l’assistant IA.
  • chat-assistant-payload-item — Message ou résultat individuel dans le panneau de l’assistant.
  • starter-question-text — Question de démarrage suggérée affichée dans un panneau d’assistant vide.
  • feedback-toolbar — Barre d’outils contenant les contrôles de retour d’expérience de la page.
  • contextual-feedback-container — Conteneur pour le retour d’expérience contextuel en ligne.
  • contextual-feedback-form — Formulaire de retour d’expérience contextuel en ligne.
  • contextual-feedback-form-title — Titre du formulaire de retour d’expérience contextuel.
  • contextual-feedback-input — Champ de saisie dans le formulaire de retour d’expérience contextuel.
  • contextual-feedback-button — Bouton d’action dans le formulaire de retour d’expérience contextuel.
  • contextual-feedback-form-submit-button — Bouton d’envoi du formulaire de retour d’expérience contextuel.
  • code-snippet-feedback-popover-content — Contenu du popover pour le retour d’expérience sur les extraits de code.
  • code-snippet-feedback-form — Formulaire de retour d’expérience pour un extrait de code.
  • code-snippet-feedback-textarea — Zone de texte dans le formulaire de retour d’expérience de l’extrait de code.
  • code-snippet-feedback-form-title — Titre du formulaire de retour d’expérience de l’extrait de code.
  • code-snippet-feedback-form-description — Texte descriptif dans le formulaire de retour d’expérience de l’extrait de code.
  • code-snippet-feedback-form-submit-button — Bouton d’envoi du formulaire de retour d’expérience de l’extrait de code.
  • login-link — Lien qui initie le processus de connexion.
  • logout-link — Lien qui initie le processus de déconnexion.
  • multi-view-item — Option de vue individuelle dans un commutateur multi-vues.
  • multi-view-dropdown — Menu déroulant pour sélectionner entre plusieurs vues.
  • multi-view-dropdown-trigger — Bouton qui ouvre le menu déroulant multi-vues.
  • multi-view-dropdown-content — Zone de contenu du menu déroulant multi-vues.
  • multi-view-dropdown-item — Élément individuel au sein du menu déroulant multi-vues.
  • directory — Conteneur racine d’une page de répertoire.
  • directory-group — Groupe de pages associées au sein d’un répertoire.
  • directory-page — Entrée de page individuelle dans un répertoire.
  • directory-card — Entrée de page sous forme de carte dans un répertoire.
  • not-found-container — Conteneur racine de la page 404.
  • not-found-status-code — Affichage du code de statut sur la page 404.
  • not-found-title — Titre de la page 404.
  • not-found-description — Texte descriptif sur la page 404.
  • not-found-recommended-pages-list — Liste de pages recommandées affichées sur la page 404.
  • not-found-recommended-page-link — Lien individuel dans la liste des pages recommandées.
  • color — Élément d’échantillon de couleur.
  • color-row — Ligne regroupant des échantillons de couleur.
  • color-item — Élément de couleur individuel au sein d’une ligne de couleurs.
  • tree — Conteneur d’arborescence de fichiers.
  • tree-folder — Entrée de dossier dans une arborescence de fichiers.
  • tree-file — Entrée de fichier dans une arborescence de fichiers.
Certains éléments exposent des attributs de données que vous pouvez utiliser comme sélecteurs CSS.État actif (data-active) :
  • nav-dropdown-item[data-active] — Élément actif dans un menu déroulant de navigation.
  • mobile-nav-tabs-item[data-active] — Onglet actif dans la navigation mobile.
  • sidebar-group[data-active] — Groupe actif de la barre latérale.
  • #sidebar-content li[data-active] — Lien actif de la barre latérale.
  • .nav-tabs-item[data-active] — Onglet actif de la navigation supérieure. S’applique uniquement aux onglets simples ; les onglets avec menus déroulants ne reçoivent pas data-active. Notez le . initial : il cible une classe sur un élément <a> standard, contrairement à la plupart des autres composants qui utilisent des noms d’éléments personnalisés.
  • toc-item[data-active] — Élément actif de la table des matières.
  • toc-item[data-active-deepest] — Élément le plus profond actif de la table des matières. Uniquement présent sur le titre exactement visible, contrairement à data-active qui est également défini sur ses titres parents.
Nom de composant (data-component-name) :Utilisez data-component-name pour cibler des composants d’interface spécifiques avec un sélecteur stable qui persiste même si les noms de classes internes changent.
  • [data-component-name="mermaid-container"] — Conteneur de diagramme Mermaid, y compris la superposition des contrôles de zoom.
  • [data-component-name="mermaid-controls-wrapper"] — Contrôles de zoom et de déplacement Mermaid.
  • [data-component-name="primary-header-button"] — Bouton principal de l’en-tête. Thème Sequoia uniquement.
  • [data-component-name="theme-toggle"] — Bascule de thème.
Partie de composant (data-component-part) :Utilisez data-component-part pour cibler les sous-éléments d’un composant.
  • [data-component-part="contact-support-button"] — Le wrapper <a> autour du lien de contact support dans le panneau assistant.
  • [data-component-part="contact-support-icon"] — Le <span> englobant l’icône.
  • [data-component-part="contact-support-text"] — L’élément <p> contenant le libellé.
Attributs Badge :
  • [data-badge] — Tout élément badge.
  • [data-badge][data-color="blue"] — Badge filtré par couleur.
  • [data-badge][data-size="sm"] — Badge filtré par taille.

​
JavaScript personnalisé

Le JavaScript personnalisé vous permet d’ajouter du code exécutable personnalisé à l’échelle du site. C’est l’équivalent d’ajouter une balise <script> contenant du code JS sur chaque page. Mintlify inclut tout fichier .js situé dans le répertoire de contenu de votre documentation dans chaque page de votre site de documentation. Par exemple, vous pouvez ajouter le fichier ga.js suivant pour activer Google Analytics sur l’ensemble de la documentation. 
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TAG_ID');
Veuillez l’utiliser avec prudence afin de ne pas introduire de vulnérabilités de sécurité.