💄

"tailwindTYPOGRAPHY"で取り急ぎイイ感じなスタイルを適用する

2021/05/23に公開

Next.js

Tailwind CSS

microCMS

tech

はじめに

今現在私は Next.js + Tailwind CSS + microCMS でブログサイトを作成しています。

ブログ記事詳細のページを実装するにあたり、microCMS ではリッチエディタで記述した内容は HTML 形式で取得することになります

pages/blog/[id].js

export default function BlogId({ blog }) {
  return (
    <main>
      <div
        dangerouslySetInnerHTML={{
          __html: `${blog.body}`,
        }}
      />
    </main>
  );
}

が、Tailwind CSS はブラウザの標準スタイルがリセットされるので、記事の詳細ページはスタイリングしないと 👇 のように味気ない感じになります。

詳細ページのデザインも拘っていきたいところですが、他にも実装したい機能があるので取り急ぎイイ感じにスタイルを当ててくれる "tailwindTYPOGRAPHY" というプラグインが便利だったので紹介します。

👇 が"tailwindTYPOGRAPHY"を導入した記事の詳細ページです。一瞬でレイアウトが整い、イイ感じになりました。

導入

まずはプロジェクトにインストールします。

# Using npm
npm install @tailwindcss/typography

# Using Yarn
yarn add @tailwindcss/typography

次にtailwind.config.jsに以下の通り追記します。

tailwind.config.js

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

これで導入は完了です。

使い方

スタイルを当てたい部分の className にproseを追加します。これだけで OK!

<article className="prose">{{ markdown }}</article>

サイズ修飾子

サイズ修飾子を使用すると、全体的なサイズを調整することができます。(font-size や padding も調整してくれます！)

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

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

Class	Body font size
`prose-sm`	0.875rem (14px)
`prose`	1rem (16px)
`prose-lg`	1.125rem (18px)
`prose-xl`	1.25rem (20px)
`prose-2xl`	1.5rem (24px)

//👇では動作しないです。
<article className="prose-lg">
  {{ markdown }}
</article>

//`prose`は常に入れる必要があります。
<article className="prose prose-lg">
  {{ markdown }}
</article>

カラー修飾子

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

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

Class	Link color
`prose-red`	`red.600`
`prose-yellow`	`yellow.600`
`prose-green`	`green.600`
`prose-blue`	`blue.600`
`prose-indigo`	`indigo.600`
`prose-purple`	`purple.600`
`prose-pink`	`pink.600`

レスポンシブ対応

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

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

カスタマイズ

こちらも通常の Tailwind CSS と同様、tailwind.config.jsに追記することでカスタマイズ可能です。設定方法は github リポジトリをご確認下さい。

さいごに

とりあえず、ブログ記事詳細ページはこのままで運用しておこうと思います。(いずれスタイリングしていきたいけど、まだまだ先になりそう...)
Tailwind CSS を使うのはとても楽しいですが、全てにスタイルを適用するのが面倒 or 時間がない時には "tailwindTYPOGRAPHY" が活躍してくれそうです。

参考

GitHubで編集を提案