tailwindcss typographyダウンロード - tailwindcss typographyソースコードのダウンロード

公式の Tailwind CSS Typography プラグインは、Markdown からレンダリングされた HTML や CMS から取得された HTML など、制御していないバニラ HTML に美しいタイポグラフィーのデフォルトを追加するために使用できる一連のproseクラスを提供します。

 < article class =" prose lg:prose-xl " > {{ markdown }} </ article >

実際の動作を確認するには、Tailwind Play のライブデモをチェックしてください。

インストール

npm からプラグインをインストールします。

npm install -D @tailwindcss/typography

次に、プラグインをtailwind.config.jsファイルに追加します。

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    // ...
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    // ...
  ] ,
}

基本的な使い方

これで、 proseクラスを使用して、標準的な HTML に賢明なタイポグラフィスタイルを追加できるようになりました。

 < 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 >

グレースケールの選択

このプラグインには、Tailwind にデフォルトで含まれる 5 つのグレースケールごとにモディファイアクラスが含まれているため、プロジェクトで使用しているグレーに合わせてコンテンツのスタイルを簡単に設定できます。

 < article class =" prose prose-slate " > {{ markdown }} </ article >

完全にデフォルトの Tailwind CSS v2.0 ビルドを使用して生成されたクラスは次のとおりです。

クラス	グレースケール
`prose-gray` (デフォルト)	グレー
`prose-slate`	スレート
`prose-zinc`	亜鉛
`prose-neutral`	中性
`prose-stone`	石

修飾子クラスは、マルチクラス修飾子パターンとともに使用するように設計されており、基本proseクラスと組み合わせて使用する必要があります。

注記

グレースケール修飾子を追加するときは、必ずproseクラスを含めてください

 < article class =" prose prose-stone " > {{ markdown }} </ article >

独自のカラーテーマの作成について詳しくは、カスタムカラーテーマの追加に関するドキュメントを参照してください。

タイプスケールの適用

サイズ修飾子を使用すると、さまざまなコンテキストに合わせてタイポグラフィの全体的なサイズを調整できます。

 < article class =" prose prose-xl " > {{ markdown }} </ article >

すぐに使用できる 5 つの異なるタイポグラフィサイズが含まれています。

クラス	本文のフォントサイズ
`prose-sm`	0.875レム（14ピクセル）
`prose-base` (デフォルト)	1レム(16ピクセル)
`prose-lg`	1.125レム（18ピクセル）
`prose-xl`	1.25レム(20ピクセル)
`prose-2xl`	1.5レム(24ピクセル)

これらを Tailwind のブレークポイント修飾子と組み合わせて使用すると、さまざまなビューポートサイズでコンテンツの全体のフォントサイズを変更できます。

 < article class =" prose md:prose-lg lg:prose-xl " > {{ markdown }} </ article >

提供されるサイズ修飾子のすべては、フォントサイズ、見出しの間隔、コードブロックのパディングなどの関係を含め、可能な限り美しく見えるようにプロのデザイナーによって手作業で調整されています。

サイズ修飾子は、マルチクラス修飾子パターンで使用するように設計されており、基本proseクラスと組み合わせて使用する必要があります。

注記

サイズ修飾子を追加するときは、必ずproseクラスを含めてください

 < article class =" prose prose-lg " > {{ markdown }} </ article >

含まれているタイプスケールのカスタマイズについては、CSS のカスタマイズに関するドキュメントを参照してください。

ダークモードへの適応

各デフォルトのカラーテーマには、 prose-invertクラスを追加することでトリガーできる、手動で設計されたダークモードバージョンが含まれています。

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

独自のカラーテーマの作成について詳しくは、カスタムカラーテーマの追加に関するドキュメントを参照してください。

要素修飾子

要素修飾子を使用して、コンテンツ内の個々の要素のスタイルを HTML 内で直接カスタマイズします。

 < article class =" prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600 " >
  {{ markdown }}
</ article >

これにより、ブランドに合わせてリンクのスタイルを設定したり、画像に境界線の半径を追加したりするなどの作業が簡単になります。

利用可能な要素修飾子の完全なリストは次のとおりです。

修飾子	ターゲット
`prose-headings:{utility}`	`h1` 、 `h2` 、 `h3` 、 `h4` 、 `th`
`prose-lead:{utility}`	`[class~="lead"]`
`prose-h1:{utility}`	`h1`
`prose-h2:{utility}`	`h2`
`prose-h3:{utility}`	`h3`
`prose-h4:{utility}`	`h4`
`prose-p:{utility}`	`p`
`prose-a:{utility}`	`a`
`prose-blockquote:{utility}`	`blockquote`
`prose-figure:{utility}`	`figure`
`prose-figcaption:{utility}`	`figcaption`
`prose-strong:{utility}`	`strong`
`prose-em:{utility}`	`em`
`prose-kbd:{utility}`	`kbd`
`prose-code:{utility}`	`code`
`prose-pre:{utility}`	`pre`
`prose-ol:{utility}`	`ol`
`prose-ul:{utility}`	`ul`
`prose-li:{utility}`	`li`
`prose-table:{utility}`	`table`
`prose-thead:{utility}`	`thead`
`prose-tr:{utility}`	`tr`
`prose-th:{utility}`	`th`
`prose-td:{utility}`	`td`
`prose-img:{utility}`	`img`
`prose-video:{utility}`	`video`
`prose-hr:{utility}`	`hr`

これらのモディファイアをhoverなどの他のモディファイアとスタックする場合、おそらく他のモディファイアを最初に置く必要があります。

 < article class =" prose prose-a:text-blue-600 hover:prose-a:text-blue-500 " > {{ markdown }} </ article >

詳細については、スタックされた修飾子の順序付けに関する Tailwind CSS ドキュメントをお読みください。

最大幅の上書き

各サイズ修飾子には、コンテンツを可能な限り読みやすく保つように設計されたmax-widthが組み込まれています。ただし、これが常に望ましいとは限りません。場合によっては、コンテンツをコンテナーの幅いっぱいに収めたい場合もあります。

このような場合、コンテンツにmax-w-none追加して、埋め込まれた max-width をオーバーライドするだけです。

 < div class =" grid grid-cols-4 " >
  < div class =" col-span-1 " >
    <!-- ... -->
  </ div >
  < div class =" col-span-3 " >
    < article class =" prose max-w-none " > {{ markdown }} </ article >
  </ div >
</ div >

高度なトピック

タイポグラフィスタイルを元に戻す

proseスタイルを継承すべきではないコンテンツにマークアップのブロックが埋め込まれている場合は、 not-proseクラスを使用してサンドボックス化します。

 < article class =" prose " >
  < h1 > My Heading </ h1 >
  < p > ... </ p >

  < div class =" not-prose " >
    <!-- Some example or demo that needs to be prose-free -->
  </ div >

  < p > ... </ p >
  <!-- ... -->
</ article >

現時点では、 not-proseブロック内に新しいproseインスタンスをネストすることはできないことに注意してください。

カスタムカラーテーマの追加

tailwind.config.jsファイルのtypographyセクションに新しいキーを追加し、 cssキーの下に色を指定することで、独自のカラーテーマを作成できます。

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    extend : {
      typography : ( { theme } ) => ( {
        pink : {
          css : {
            '--tw-prose-body' : theme ( 'colors.pink[800]' ) ,
            '--tw-prose-headings' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-lead' : theme ( 'colors.pink[700]' ) ,
            '--tw-prose-links' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-bold' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-counters' : theme ( 'colors.pink[600]' ) ,
            '--tw-prose-bullets' : theme ( 'colors.pink[400]' ) ,
            '--tw-prose-hr' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-quotes' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-quote-borders' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-captions' : theme ( 'colors.pink[700]' ) ,
            '--tw-prose-code' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-pre-code' : theme ( 'colors.pink[100]' ) ,
            '--tw-prose-pre-bg' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-th-borders' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-td-borders' : theme ( 'colors.pink[200]' ) ,
            '--tw-prose-invert-body' : theme ( 'colors.pink[200]' ) ,
            '--tw-prose-invert-headings' : theme ( 'colors.white' ) ,
            '--tw-prose-invert-lead' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-invert-links' : theme ( 'colors.white' ) ,
            '--tw-prose-invert-bold' : theme ( 'colors.white' ) ,
            '--tw-prose-invert-counters' : theme ( 'colors.pink[400]' ) ,
            '--tw-prose-invert-bullets' : theme ( 'colors.pink[600]' ) ,
            '--tw-prose-invert-hr' : theme ( 'colors.pink[700]' ) ,
            '--tw-prose-invert-quotes' : theme ( 'colors.pink[100]' ) ,
            '--tw-prose-invert-quote-borders' : theme ( 'colors.pink[700]' ) ,
            '--tw-prose-invert-captions' : theme ( 'colors.pink[400]' ) ,
            '--tw-prose-invert-code' : theme ( 'colors.white' ) ,
            '--tw-prose-invert-pre-code' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-invert-pre-bg' : 'rgb(0 0 0 / 50%)' ,
            '--tw-prose-invert-th-borders' : theme ( 'colors.pink[600]' ) ,
            '--tw-prose-invert-td-borders' : theme ( 'colors.pink[700]' ) ,
          } ,
        } ,
      } ) ,
    } ,
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    // ...
  ] ,
}

その他の例については、内部スタイル定義を参照してください。

デフォルトのクラス名の変更

何らかの理由でprose以外のクラス名を使用する必要がある場合は、プラグインの登録時にclassNameオプションを使用して使用できます。

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    // ...
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ( {
      className : 'wysiwyg' ,
    } ) ,
  ]
  . . .
}

これで、デフォルトのクラス名内のproseのすべてのインスタンスがカスタムクラス名に置き換えられます。

 < article class =" wysiwyg wysiwyg-slate lg:wysiwyg-xl " >
  < h1 > My Heading </ h1 >
  < p > ... </ p >

  < div class =" not-wysiwyg " >
    <!-- Some example or demo that needs to be prose-free -->
  </ div >

  < p > ... </ p >
  <!-- ... -->
</ article >

CSSのカスタマイズ

このプラグインによって生成された生の CSS をカスタマイズする場合は、 tailwind.config.jsファイルのthemeセクションのtypographyキーの下にオーバーライドを追加します。

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    extend : {
      typography : {
        DEFAULT : {
          css : {
            color : '#333' ,
            a : {
              color : '#3182ce' ,
              '&:hover' : {
                color : '#2c5282' ,
              } ,
            } ,
          } ,
        } ,
      } ,
    } ,
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    // ...
  ] ,
}

Tailwind のすべてのテーマのカスタマイズと同様に、 themeヘルパーにアクセスする必要がある場合は、 typographyキーを関数として定義することもできます。

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    extend : {
      typography : ( theme ) => ( {
        DEFAULT : {
          css : {
            color : theme ( 'colors.gray.800' ) ,

            // ...
          } ,
        } ,
      } ) ,
    } ,
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    // ...
  ] ,
}