Tailwind タイポグラフィーを適用しないエリアを作る

Tailwind CSS Typography 便利ですよね。手っ取り早く、整ったスタイルを当てることができるので気に入っています。

でもたまにタイポグラフィーを適用している中でスタイルを当てたくない場所があったりします。そんな時はnot-proseを使うをスタイリングを解除できます。

<div class="prose">
  <!-- タイポグラフィー適用エリア -->
  <div class="not-prose">
    <!-- タイポグラフィー非適用エリア -->
  </div>
  <!-- タイポグラフィー適用エリア -->
</div>

私は、Nuxt Content でマークダウンの記事に Tailwind のタイポグラフィーを使ってスタイリングしています。マークダウンの中でカスタムコンポーネントを使用しているのですが、その中ではタイポグラフィーを適用したくありません。

その時にnot-proseを使っています。

GitHub - tailwindlabs/tailwindcss-typography: Beautiful typographic defaults for HTML you don't control.