CSSとスタイリング

カスタムCSSファイルやStarlightのTailwindプラグインを使用して、Starlightサイトをスタイリングできます。

カスタムCSSスタイル

Starlightサイトに適用されるスタイルをカスタマイズするには、追加のCSSファイルを作成し、Starlightのデフォルトスタイルを変更または拡張します。

src/ディレクトリにCSSファイルを追加します。たとえば、以下ではデフォルトのカラム幅を広げ、ページタイトルのテキストサイズを大きくしています。
src/styles/custom.css
```
:root {
  --sl-content-width: 50rem;
  --sl-text-5xl: 3.5rem;
}
```

astro.config.mjsで、StarlightのcustomCss配列にCSSファイルへのパスを追加します。

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      title: 'カスタムCSSを設定したドキュメント',
      customCss: [
        // カスタムCSSファイルへの相対パス
        './src/styles/custom.css',
      ],
    }),
  ],
});

GitHub上のprops.cssファイルで、サイトをカスタマイズするために設定可能な、Starlightが使用しているすべてのカスタムCSSプロパティを確認できます。

Tailwind CSS

AstroプロジェクトでのTailwind CSSのサポートは、AstroのTailwindインテグレーションによって提供されています。また、Starlightは、Starlightのスタイルとの互換性を保ちつつTailwindを設定するのに役立つ、補完的なTailwindプラグインを提供しています。

StarlightのTailwindプラグインは、以下の設定を適用します。

Tailwindのdark:バリアントをStarlightのダークモードと連携するように設定します。
UStarlightのUIでTailwindのテーマカラーとフォントを使用します。
TailwindのPreflightリセットスタイルを無効化した上で、Tailwindのボーダーユーティリティクラスに必要なPreflightの必須部分のみ有効化します。

Tailwindを使用して新しいプロジェクトを作成する

create astroを使用して、Tailwind CSSが組み込まれた新しいStarlightプロジェクトを開始します。

npm create astro@latest -- --template starlight/tailwind

pnpm create astro --template starlight/tailwind

yarn create astro --template starlight/tailwind

Tailwindを既存のプロジェクトに追加する

既存のStarlightサイトにTailwind CSSを追加する場合は、以下の手順に従ってください。

AstroのTailwindインテグレーションを追加します。
- npm
- pnpm
- Yarn
Terminal window
npx astro add tailwind
Terminal window
pnpm astro add tailwind
Terminal window
yarn astro add tailwind
StarlightのTailwindプラグインをインストールします。
- npm
- pnpm
- Yarn
Terminal window
npm install @astrojs/starlight-tailwind
Terminal window
pnpm add @astrojs/starlight-tailwind
Terminal window
yarn add @astrojs/starlight-tailwind
Tailwindのベーススタイル用のCSSファイルを、src/tailwind.cssなどの場所に作成します。
src/tailwind.css
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

上で作成したTailwindのベーススタイルを使用し、またデフォルトのベーススタイルを無効とするように、Astroの設定ファイルを更新します。

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  integrations: [
    starlight({
      title: 'Tailwindを使ったドキュメント',
      customCss: [
        // Tailwindのベーススタイルへのパス
        './src/tailwind.css',
      ],
    }),
    tailwind({
      // デフォルトのベーススタイルを無効にする
      applyBaseStyles: false,
    }),
  ],
});

StarlightのTailwindプラグインをtailwind.config.mjsに追加します。

import starlightPlugin from '@astrojs/starlight-tailwind';

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  plugins: [starlightPlugin()],
};

StarlightをTailwindでスタイリングする

Starlightは、Tailwindのテーマの設定値をUIで使用します。

以下のオプションが設定されている場合、Starlightのデフォルトスタイルが上書きされます。

colors.accent — リンクと現在のアイテムのハイライトに使用されます
colors.gray — バックグラウンドカラーとボーダーに使用されます
fontFamily.sans — UIとコンテンツのテキストに使用されます
fontFamily.mono — コード例に使用されます

import starlightPlugin from '@astrojs/starlight-tailwind';
import colors from 'tailwindcss/colors';

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      colors: {
        // 好みのアクセントカラー。インディゴはStarlightのデフォルトに最も近い色です。
        accent: colors.indigo,
        // 好みのグレースケール。ZincはStarlightのデフォルトに最も近い色です。
        gray: colors.zinc,
      },
      fontFamily: {
        // 好みのテキストフォント。Starlightはデフォルトでシステムフォントスタックを使用します。
        sans: ['"Atkinson Hyperlegible"'],
        // 好みのコードフォント。Starlightはデフォルトでシステムの等幅フォントを使用します。
        mono: ['"IBM Plex Mono"'],
      },
    },
  },
  plugins: [starlightPlugin()],
};

テーマの設定

Starlightのカラーテーマは、デフォルトのカスタムプロパティを上書きしてコントロールできます。これらの変数はUI全体で使用されます。テキストと背景色にはグレーシェードが使用され、リンクとナビゲーションの現在のアイテムをハイライトするためにはアクセントカラーが使用されます。

テーマカラーエディタ

以下のスライダーを使用して、Starlightのアクセントカラーとグレーカラーのパレットを変更してみましょう。ダークとライトのプレビューエリアには、結果となる色の組み合わせが表示されます。また、このページ自体も合わせて更新されるため、変更内容をプレビューできます。

コントラストレベルオプションで、WCAGによる色のコントラスト基準から満たしたいものを指定します。

変更内容に満足できたら、以下のCSSまたはTailwindコードをコピーしてプロジェクトで使用します。

プリセット

コントラストレベル

AA AAA

アクセント

色相 269

彩度 0.27

グレー

色相 270

彩度 0.016

ダークモード

本文は背景とのコントラストが高いグレーシェードで表示されます。リンクは色付けされます。目次などの一部のテキストは、コントラストが低くなります。 インラインコードは独自の背景色をもちます。

以下のCSSをカスタムCSSファイルに追加して、このテーマをサイトに適用します。

以下のTailwindの設定ファイルの例には、theme.extend.colorsの設定で使用するために生成されたaccentとgrayのカラーパレットが含まれています。