【 TailwindCSS 】記事が一瞬で美麗になる "prose" クラスのすすめ

デザインセンスや知識を持ち合わせていないエンジニアにとって、h1 や h2 のフォントサイズをいくつにするか、行間隔をどうするかなどは非常に悩ましい問題です。

TailwindCSSには公式でそのような問題を解決してくれるプラグインが用意されているので紹介します。

@tailwindcss/typography

@tailwindcss/typographyはTailwindCSSの公式プラグインです。インストール、設定したあと、prose（散文）というクラスが使用できるようになります。

proseクラスは次のように使用し、<article>の子要素に対し適用されます。

<article class="prose lg:prose-xl">
  <h1>Garlic bread with cheese: What the science tells us</h1>
  <p>
    For years parents have espoused the health benefits of eating garlic bread with cheese to their
    children, with the food earning such an iconic status in our culture that kids will often dress
    up as warm, cheesy loaf for Halloween.
  </p>
  <p>
    But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
    springing up around the country.
  </p>
  <!-- ... -->
</article>

proseクラスが適用されるのは、マークダウン記法に対応したHTML要素、つまりh1, h2, p, code, li, table, img...などです。

文字色、スケールともに５パターン用意されていますが、微調整やカスタマイズも可能です。さらにダークモードにも対応しています。

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

実例

実際にproseクラスを適用した実例をビフォー・アフターで見てみましょう。

BEFORE:

AFTER:

よくあるブログなどの記事ぽくなりました。

文字列の大きさやコントラストなどが変更され、記事も中央寄せになっており、読みやすくなったかと思います。このスタイリングが、クラス名にproseと打ち込むだけで完成します。

とても簡単に導入でき記事が美しくなるので、TailwindCSSをお使いであれば使ってみてください。

以上です。