Tailwind CSS v1 で Typography プラグインを使う

Tailwind CSS Typography は、CMS などから得られる素の HTML をスタイル付けする prose クラスを提供するプラグインです。

この記事では、Tailwind CSS v1.9.6 を使っている場合の導入の仕方を解説します。

インストール

Tailwind CSS v1.9.6 に対応する v0.2.0 をインストールします。

$ npm i -D @tailwindcss/typography@0.2.0

インストールできたら、tailwind.config.js の plugins に追記します。

// tailwind.config.js
module.exports = {
  //...
  plugins: [
    require('@tailwindcss/typography'),
  ],
  //...
}

使い方

prose クラスを付けた要素の中に、CMS などから得られた HTML を入れるだけです。

<!-- Vue.js -->
<article class="prose" v-html="vanillaHTML"></article>

<!-- vanilla HTML -->
<article class="prose">
  <h1>記事タイトル</h1>
  <h2>見出し</h2>
  <p>段落</p>
  <ul>
    <li>リスト</li>
  </ul>
</article>

レスポンシブにするには、prose クラスを付けつつ他の prose 系クラスを使います。

<article class="prose prose-sm md:prose" v-html="vanillaHTML"></article>

CSS ファイルサイズを節約したい

prose 系クラスによるレスポンシブは確かに読みやすいのですが、例えば上記の設定だと prose-sm と md:prose 以下にもセレクタ群が生成されてしまい、ファイルサイズが大きくなります。

見た目は劣りますが、font-size と line-height を調整することでもレスポンシブに対応することができます。

Typography のデフォルトは line-height: 1.75 ですが、Tailwind CSS にはこれにあたるクラスがないので追加します。他のブレイクポイントで使うものがあればついでに持ってきます。

// tailwind.config.js
const { 'default': prose, 'sm': proseSm } = require('@tailwindcss/typography/src/styles')
module.exports = {
  //...
  theme: {
    extend: {
      lineHeight: {
        prose: prose.css[1].lineHeight,
        'prose-sm': proseSm.css[0].lineHeight,
      },
    },
  },
  //...
}

prose-sm を text-sm leading-prose-sm に、md:prose を md:text-base md:leading-prose に置き換えます。

<article class="prose text-sm md:text-base leading-prose-sm md:leading-prose"></article>

カスタマイズする

tailwind.config.js から Typography のスタイルを変更することができます。theme.typography を theme を引数に取るメソッドにすることで、Tailwind CSS のスタイルを参照することもできます。

theme.typography.default.css 内で指定できるセレクタ名は、node_modules/@tailwindcss/typography/src/styles.js で確認できます。

// tailwind.config.js
module.exports = {
  //...
  theme: {
    extend: {
      spacing: {
        '0.5': '.125rem',
        '1.5': '.375rem',
        '2.5': '.625rem',
        '3.5': '.875rem',
      },
    },
    typography: theme => ({
      default: {
        css: {
          // .prose の max-width を削除
          maxWidth: false,
          h4: {
            // h4 の font-weight を 600 に変更
            fontWeight: theme('fontWeight.semibold'),
            // h4 の margin-bottom を 0.75em に変更
            marginBottom: theme('spacing.3').replace('rem', 'em'),
          },
          code: {
            backgroundColor: theme('colors.gray.100'),
            color: '#964a91',
            // セレクタ内のプロパティを削除
            fontWeight: false,
            // 自分で設定した値も参照できる
            padding: `${theme('spacing[0.5]')} ${theme('spacing.1')}`,
            borderRadius: theme('borderRadius.sm'),
          },
          // セレクタ自体を削除
          'code::before': false,
          'code::after': false,
          'pre code::before': false,
          'pre code::after': false,
        },
      },
    }),
  },
  //...
}