Tailwind CSS の proseクラスで記事の見た目を整える

更新日: 2024年4月21日 21:13 公開日: 2024年4月 1日 01:05

概要

Tailwind CSS の prose というクラスを使うと、制御されていないバニラなHTMLの見た目をいい感じに整えることができます。

ブログを立ち上げたいけどスタイルの調整が面倒...というときに使えると思います。本ブログでもこのクラスを使って記事詳細ページのレイアウトを構築しておりますが、特に大きな問題もなく使用できています。

下記の環境で確認・問題を解決しました。

TailWind CSS 本体に加え、公式プラグイン @tailwindcss/typography のインストールが必須となります。

以下のコマンドでプラグインをインストールします。

npm install -D @tailwindcss/typography

tailwind.config.js の配列 plugins にプラグイン読み込み処理を追加します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

<head> に <script> でTailwind CSS のコアとなるJSファイルを呼び出します。

次に呼び出したJSファイルにパラメータを追記します。?plugins={プラグイン名}}

<script src="https://cdn.tailwindcss.com?plugins=typography"></script>

プラグインは複数追加も可能です。カンマで区切ります。 ?plugins={プラグイン名},{プラグイン名}}

バニラHTMLの親要素に .prose というクラスを追加するだけで適用されます。

<article class="prose">
    {{ バニラなHTML }}
</article>

.prose だけでもいい感じに調整してくれますが、オプションを使えばより細かな調整が可能です。ここでは豊富に用意されているオプションの一部を紹介します。

Github のREADMEからすべてのオプションが可能です。

文字の大きさを調整します。

<article class="prose prose-xl">
    {{ バニラなHTML }}
</article>

ブラウザ設定がダークモードの場合、文字色などを反転します。

<article class="prose dark:prose-invert">
    {{ markdown }}
</article>

カテゴリ: Tailwind CSS

次の記事 >