本日、Tailwind CSS Typography pluginの次期バージョンを発表します。このバージョンでは、ダークモードの簡単なサポート、全く新しいカスタマイズAPI、そしてサポート方法が分からなかったnot-proseクラスが導入されています。
新機能の全容については、YouTubeチャンネルで公式リリースビデオをご覧ください。
Tailwind CSS Typography v0.5はTailwind CSS v3.0向けに設計されています。Tailwindの最新バージョンを使用していることを確認し、npmから新しいプラグインリリースをインストールしてください。
npm install -D @tailwindcss/typography@latestプラグインが提供するすべての機能の詳細については、更新されたtypography pluginドキュメントをご覧ください。
簡単なダークモードサポート
ダークモードでタイポグラフィの色を簡単に切り替えるために使用できるprose-invertクラスを追加しました。
<body class="bg-white dark:bg-gray-900"> <article class="prose dark:prose-invert">{{ markdown }}</article></body>ダークテーマは、当社の専門デザインチームが手作りしており、使用しているグレースケールに自動的に適応します。
グレースケールを選択
Tailwind CSS v3.0にはデフォルトで5種類のグレースケールが付属しており、更新されたtypographyプラグインにはそれぞれのクラスが含まれているため、サイトの他の部分とタイポグラフィを簡単に合わせることができます。
<article class="prose prose-slate">{{ markdown }}</article>内部でのカラーテーマの定義方法も簡素化しました。これにより、必要に応じて独自のテーマを追加することが容易になります。
詳細については、ドキュメントをご覧ください。
HTMLベースのカスタマイズAPI
HTML内で直接、proseスタイルの特定の要素を調整するために使用できる多数の修飾子を追加しました。
<article class="prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600"> {{ markdown }}</article>これにより、ブランドに合わせてリンクをスタイルしたり、画像にボーダー半径を追加したりするのが簡単になります。
詳細については、要素修飾子ドキュメントをご覧ください。
proseスタイルの取り消し
コンテンツの途中にコンテンツ以外のHTMLを挿入する必要があることはありませんか？not-proseでラップすることで、proseスタイルが干渉しないようにできます。
<article class="prose"> <h1>My Heading</h1> <p>...</p> <div class="not-prose"> <!-- Some HTML that needs to be prose-free --> </div> <p>...</p> <!-- ... --></article>試してみませんか？詳細と開始方法については、typography pluginドキュメントをご覧ください。