Use CSS para estilizar elementos HTML ou adicione CSS e JavaScript personalizados para ajustar completamente o visual e a experiência da sua documentação.

​
Estilização com Tailwind CSS

Use o Tailwind CSS v3 para estilizar elementos HTML. Você pode controlar layout, espaçamento, cores e outras propriedades visuais. Algumas classes comuns são:
  • w-full - Largura total
  • aspect-video - Proporção 16:9
  • rounded-xl - Cantos arredondados grandes
  • block, hidden - Controle de exibição
  • dark:hidden, dark:block - Visibilidade no modo escuro
Valores arbitrários do Tailwind CSS não são compatíveis. Para valores personalizados, use a prop style. 
<img style={{ width: '350px', margin: '12px auto' }} src="/path/image.jpg" />

​
CSS personalizado

Adicione arquivos CSS ao seu repositório; os nomes de classes definidos neles serão aplicados e ficarão disponíveis em todos os seus arquivos MDX.

​
Adicionando style.css

Por exemplo, você pode adicionar o seguinte arquivo style.css para personalizar a barra de navegação e o rodapé. 
#navbar {
  background: "#fffff2";
  padding: 1rem;
}

footer {
  margin-top: 2rem;
}

​
Usando identificadores e seletores

A Mintlify tem um conjunto de identificadores e seletores comuns para ajudar você a marcar elementos importantes da interface.
Use a ferramenta Inspecionar elemento para encontrar referências aos elementos que deseja personalizar.
As referências e o estilo de elementos comuns estão sujeitos a mudanças à medida que a plataforma evolui. Use estilos personalizados com cautela.

​
JavaScript personalizado

O JavaScript personalizado permite adicionar código executável globalmente. É equivalente a incluir uma tag <script> com código JS em todas as páginas.

​
Adicionando JavaScript personalizado

Qualquer arquivo .js dentro do diretório de conteúdo da sua documentação será incluído em todas as páginas. Por exemplo, você pode adicionar o arquivo ga.js abaixo para ativar o Google Analytics em toda a documentação. 
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TAG_ID');
Use com cautela para não introduzir vulnerabilidades de segurança.