これまで、Tailwind を使って記事、ドキュメント、ブログ記事などをスタイルするのは、タイポグラフィに対する鋭い目と、多くの複雑なカスタム CSS を必要とする、面倒な作業でした。
デフォルトでは、Tailwind は段落、見出し、リストなどからデフォルトのブラウザースタイルをすべて削除します。これは、アプリケーション UI を構築する際には、ユーザーエージェントのスタイルを元に戻す時間を短縮できるため非常に便利ですが、CMS のリッチテキストエディターや markdown ファイルから来たコンテンツをスタイルしようとしている場合、驚くほど直感的ではありません。
実際、これについて多くの苦情が寄せられており、人々は私たちに次のようなことを定期的に尋ねます。
なぜ Tailwind は私の
h1要素のデフォルトスタイルを削除するのですか？ これを無効にするにはどうすればよいですか？ 他のすべてのベーススタイルも失うとはどういう意味ですか？
お気持ちは分かりますが、単にベーススタイルを無効にすることが本当に望んでいることだとは確信していません。ダッシュボード UI の一部で p 要素を使用するたびに、煩わしいマージンを削除する必要はありません。そして、ブログ記事にユーザーエージェントのスタイルを使用することを本当に望んでいるとも思えません — ひどいものではなく、素晴らしいものにしたいはずです。
だからこそ今日、私たちは @tailwindcss/typography をリリースできることを嬉しく思っています — これは、ベーススタイルを無効にするような愚かなことをすることの欠点なしに、実際に望むものを与えてくれるプラグインです。
これは、プレーンな HTML コンテンツの任意のブロックに適用して、美しく、適切にフォーマットされたドキュメントに変えることができる、新しい prose クラスのセットを追加します。
<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>では、実際にはどのように見えるのでしょうか？ ええと、今まさにそれを見ています — 私たちはこのブログのコンテンツをスタイルするためにそれを使用しています！
この記事について話したいですか？ GitHub で議論する →