Astro で tailwindcss / typography を使用する

はじめに

• tailwindcss-typography

tailwindcss / typography は TailwindCSS の公式プラグインです。 インストール・設定したあと、prose というクラスが使用できるようになります。

prose クラスは次のように使用し <article> の子要素に対し適用されます。

1
<article class="prose lg:prose-xl">{{ markdown }}</article>

インストール

npm でプロジェクトに typography プラクインをインストールできます。

1
npm install @tailwindcss/typography

次に tailwind.config.js に以下のように設定します。

1
module.exports = {
2
  theme: {
3
    // ...
4
  },
5
  plugins: [
6
    require('@tailwindcss/typography'),
7
    // ...
8
  ],
9
}

使い方

スタイルを当てたい部分の class にproseを追加します。

1
<article class="prose">{{ markdown }}</article>

要素装飾子

要素装飾子を使って様々なスタイリングができます。

• Element modifiers -typography

1
<article class="prose prose-a:text-blue-600 hover:prose-a:text-blue-500">
2
  {{ markdown }}
3
</article>

要素装飾子は prose と組み合わせて使用する必要があります。

• デフォルト値(style.js -typography)

主な装飾子の使い方

サイズ修飾子

サイズ修飾子を使用すると、全体的なサイズを調整することができます。

1
<article class="prose prose-xl">{{ markdown }}</article>

サイズの種類は以下の通り5種類。

カラー修飾子

カラー修飾子を使用すると、リンクのカラーを変更することができます。(デフォルトはtext-gray-600)

1
<article className="prose prose-indigo">{{ markdown }}</article>

レスポンシブ対応

通常の Tailwind CSS と同様、レスポンシブ対応も可能です。

1
<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl">
2
  {{ markdown }}
3
</article>

カスタマイズ

長くなるので styles/global.css で定義しておきます。

1
article {
2
  @apply prose prose-neutral max-w-full dark:prose-invert prose-img:mx-auto prose-img:my-auto;
3
  @apply prose-headings:text-black prose-headings:dark:text-white;
4
}