💄

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

commits3 min read

はじめに

今現在私は 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"を導入した記事の詳細ページです。一瞬でレイアウトが整い、イイ感じになりました。

私自身初学者なので記述内容が不適切なトコロもあると思います。
不備等ありましたら、ご指摘頂けたら嬉しいです。

導入

  1. まずはプロジェクトにインストールします。
# Using npm
npm install @tailwindcss/typography

# Using Yarn
yarn add @tailwindcss/typography
  1. 次に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)

注意点としてproseを常に記載しておく必要があります。

//👇では動作しないです。
<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 リポジトリをご確認下さい。

https://github.com/tailwindlabs/tailwindcss-typography

さいごに

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

参考

https://github.com/tailwindlabs/tailwindcss-typography
https://blog.microcms.io/microcms-next-jamstack-blog/
https://ja.reactjs.org/docs/dom-elements.html
GitHubで編集を提案

Discussion

ログインするとコメントできます