カスタマイズの柔軟性

Nextra と nextra-theme-docs は、--nextra-primary-hue や --nextra-primary-saturation などの CSS カスタムプロパティと、nextra- 接頭辞の安定したクラス名を公開しており、 自前のグローバルスタイルシートから上書きできます。

このプロジェクトはルートレイアウトから app/globals.css を読み込んでいます。サイト全体では Nextra 標準の青いアクセントを維持しつつ、このデモ内だけに紫の配色を適用する .custom-gradient-box ユーティリティを定義しています:

.custom-gradient-box {
  --nextra-primary-hue: 280deg;
  --nextra-primary-saturation: 90%;
 
  background: linear-gradient(
    135deg,
    hsl(var(--nextra-primary-hue) var(--nextra-primary-saturation) 40%),
    #db2777
  );
}

mdx-components.ts でテーマの useMDXComponents ヘルパーを使い、MDXコンポーネントを グローバルに上書き・拡張することもできます。Nextra 4 は Tailwind CSS 対応も同梱している ため、Tailwind も利用可能です。