Usa il CSS per definire lo stile degli elementi HTML oppure aggiungi CSS e JavaScript personalizzati per controllare completamente aspetto e comportamento della tua documentazione.

​
Styling con Tailwind CSS

Usa Tailwind CSS v3 per stilizzare gli elementi HTML. Puoi controllare il layout, la spaziatura, i colori e altre proprietà visive. Alcune classi comuni sono:
  • w-full - Larghezza completa
  • aspect-video - Rapporto 16:9
  • rounded-xl - Angoli molto arrotondati
  • block, hidden - Controllo della visualizzazione
  • dark:hidden, dark:block - Visibilità in modalità scura
I valori arbitrari di Tailwind CSS non sono supportati. Per valori personalizzati, usa la prop style. 
<img style={{ width: '350px', margin: '12px auto' }} src="/path/image.jpg" />

​
CSS personalizzato

Aggiungi i file CSS al tuo repository: i nomi delle classi che definisci verranno applicati e saranno disponibili in tutti i file MDX.

​
Aggiungere style.css

Ad esempio, puoi aggiungere il seguente file style.css per personalizzare lo stile della barra di navigazione e del footer. 
#navbar {
  background: "#fffff2";
  padding: 1rem;
}

footer {
  margin-top: 2rem;
}

​
Uso di identificatori e selettori

Mintlify offre un set di identificatori e selettori comuni per aiutarti a contrassegnare gli elementi importanti dell’interfaccia utente.
Usa lo strumento “Ispeziona elemento” per trovare i riferimenti agli elementi che desideri personalizzare.
I riferimenti e lo stile degli elementi comuni possono cambiare con l’evoluzione della piattaforma. Usa con cautela lo stile personalizzato.

​
JavaScript personalizzato

Il JavaScript personalizzato consente di aggiungere globalmente codice eseguibile. È l’equivalente di inserire un tag <script> con codice JS in ogni pagina.

​
Aggiunta di JavaScript personalizzato

Qualsiasi file .js all’interno della directory dei contenuti della documentazione verrà incluso in ogni pagina. Ad esempio, puoi aggiungere il seguente file ga.js per abilitare Google Analytics in tutta la documentazione. 
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TAG_ID');
Utilizzare con cautela per evitare di introdurre vulnerabilità di sicurezza.