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 の任意値（arbitrary values）はサポートされていません。カスタム値が必要な場合は 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 の重要な要素にタグ付けするための共通の識別子とセレクタが用意されています。
カスタマイズしたい要素を特定するには、検証ツール（Inspect element）を使って該当要素を確認してください。
参照や共通要素のスタイルは、プラットフォームの進化に伴い変更される場合があります。カスタムスタイルの適用は慎重に行ってください。

​
カスタムJavaScript

カスタムJSを使うと、独自の実行コードをサイト全体に追加できます。すべてのページにJSコード入りの <script> タグを挿入するのと同等です。

​
カスタム JavaScript の追加

ドキュメントのコンテンツディレクトリ内にある .js ファイルは、すべてのドキュメントページで読み込まれます。たとえば、ドキュメント全体で Google Analytics を有効化するには、次の ga.js ファイルを追加します。 
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TAG_ID');
セキュリティ上の脆弱性を生じさせないよう、慎重にご利用ください。