使用 CSS 为 HTML 元素设置样式，或添加自定义 CSS 与 JavaScript，全面定制文档的外观与使用体验。

​
使用 Tailwind CSS 进行样式设置

使用 Tailwind CSS v3 为 HTML 元素设置样式。你可以控制布局、间距、颜色以及其他视觉属性。常见的类包括：
  • w-full - 全宽
  • aspect-video - 16:9 宽高比
  • rounded-xl - 大圆角
  • block、hidden - 显示控制
  • dark:hidden、dark:block - 暗色模式下的可见性
不支持 Tailwind CSS 的任意值语法。需要自定义数值时，请使用 style 属性。 
<img style={{ width: '350px', margin: '12px auto' }} src="/path/image.jpg" />

​
自定义 CSS

将 CSS 文件添加到你的代码库后，其中定义的类名会在所有 MDX 文件中生效并可用。

​
添加 style.css

例如，你可以添加下面的 style.css 文件，自定义导航栏和页脚的样式。 
#navbar {
  background: "#fffff2";
  padding: 1rem;
}

footer {
  margin-top: 2rem;
}

​
使用标识符和选择器

Mintlify 提供了一组通用的标识符和选择器，帮助你标注 UI 中的重要元素。
使用“检查元素”来定位你想自定义的元素及其引用。
随着平台的演进，引用和常用元素的样式可能会发生变化。请谨慎使用自定义样式。

​
自定义 JavaScript

自定义 JS 允许你在全局添加自定义可执行代码，相当于在每个页面插入包含 JS 代码的 <script> 标签。

​
添加自定义 JavaScript

文档内容目录中的任何 .js 文件都会被包含进每个文档页面。比如，你可以添加以下 ga.js 文件，在整个文档中启用 Google Analytics。 
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TAG_ID');
请谨慎使用，避免引入安全漏洞。