Astro StarlightでTailwind CSSを利用する

公開日:

2025-03-16

astro

tailwind

AstroのドキュメントテンプレートStarlightでTailwind CSSを使ってみたので備忘録です。

Tailwind CSSの追加

既存のStarlightプロジェクトにTailwind CSSを追加します。新規にプロジェクトを作成する場合は、下記の記事を参照してください。

AstroのTailwindインテグレーションを追加：

pnpm:

pnpm astro add @astrojs/tailwind

npm:

npx astro add @astrojs/tailwind

Yarn:

yarn astro add @astrojs/tailwind

StarlightのTailwindプラグインをインストール：

pnpm:

pnpm add @astrojs/starlight-tailwind

npm:

npm install @astrojs/starlight-tailwind

Yarn:

yarn add @astrojs/starlight-tailwind

Tailwindのベーススタイル用のCSSファイルを作成（例：src/styles/tailwind.css）します。

src/styles/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

astro.config.mjsを更新します

astro.config.mjs

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

export default defineConfig({
    integrations: [
        starlight({
            title: 'Tailwindを使ったドキュメント',
            customCss: [
                './src/styles/tailwind.css',
            ],
        }),
        tailwind({
            applyBaseStyles: false,
        }),
    ],
});

tailwind.config.mjsに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()],
};

Tailwindを使ったStarlightのスタイリング

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

例としてリンクなどに使われるアクセントカラーを変更する方法を紹介します。

colors.accent：リンクと現在のアイテムのハイライト

今回はtailwindの色設定を利用します。

色を確認したい場合は、Tailwind CSSの公式サイトを参照してください。

tailwind.config.mjs


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