@tailwindcss/typographyにもダークモードを適用する

公開日時
更新日時

以前の記事で少し取り上げたように、本ブログではmarkdownで書いた記事のレイアウトに@tailwindcss/typographyを用いている。

本ブログのダークモード対応を行うのに際して tailwind.config.js にtypography用の設定を追加する必要があったので対応方法をまとめておく。

ダークモード切り替えボタン

typographyを適用するPostContentコンポーネント

  • ↓のように className="prose" を指定するとtypographyのレイアウトが適用される
import React from 'react'
import Markdown from 'markdown-to-jsx'

export const PostContent = ({ content }: Props) => {
  return (
    <div className="max-w-2xl mx-auto">
      <Markdown className="prose">
        {content}
      </Markdown>
    </div>
  )
}
  • ただし、この状態でダークモードに切り替えてもtypographyのレイアウトは通常配色のままになってしまう

tailwind.config.js設定

  • typographyの配色を変更できるようにするために theme.extend.typography 設定と variants.typography 設定を追加する
module.exports = {
  purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      typography: (theme) => ({
        DEFAULT: {},
        dark: {
          css: {
            color: theme('colors.gray.200'),
            a: {
              color: theme('colors.gray.200'),
              '&:hover': {
                color: theme('colors.gray.200'),
              },
            },
            'h2 a': {
              color: theme('colors.gray.200'),
            },
            h1: {
              color: theme('colors.gray.200'),
            },
            h2: {
              color: theme('colors.gray.200'),
            },
            h3: {
              color: theme('colors.gray.200'),
            },
            h4: {
              color: theme('colors.gray.200'),
            },
            h5: {
              color: theme('colors.gray.200'),
            },
            h6: {
              color: theme('colors.gray.200'),
            },
            th: {
              color: theme('colors.gray.200'),
            },
            strong: {
              color: theme('colors.gray.200'),
            },
            code: {
              color: theme('colors.gray.200'),
            },
            figcaption: {
              color: theme('colors.gray.200'),
            },
            blockquote: {
              color: theme('colors.gray.200'),
            },
          },
        },
      }),
    },
  },
  variants: {
    typography: ['dark'],
  },
  plugins: [require('@tailwindcss/typography')],
}

PostContentにダークモード時のclassを追加

  • PostContentコンポーネントのclassに dark:prose-dark を追加する
import React from 'react'
import Markdown from 'markdown-to-jsx'

export const PostContent = ({ content }: Props) => {
  return (
    <div className="max-w-2xl mx-auto">
      <Markdown className="prose dark:prose-dark">
        {content}
      </Markdown>
    </div>
  )
}

これで、@tailwindcss/typographyを利用したコンポーネントにもダークモードを適用することができた。

参考


Related #css

Youtube動画で学ぶTailwind CSS

「Designing with Tailwind CSS」シリーズがとても分かりやすかった。

tailblocks

tailwind cssのテンプレート集

Next.js 10 + Tailwind CSS 2.0 でAMP対応(hybrid)を行う

next/ampのhybridモードを使い通常ページとAMPページを生成し、PostCSSでCSSの容量削減を行いinline cssとして埋め込み

Learn CSS

「Tailwind CSS Tips, Tricks & Best Practices」を観て学ぶ

動画を観ながら実際に手を動かして13個の練習問題を解いた