tailwindcss typography下載 - tailwindcss typography碼下載

官方的 Tailwind CSS Typography 插件提供了一組prose類，您可以使用它們向您無法控制的任何普通 HTML 添加漂亮的排版預設值，例如從 Markdown 渲染的 HTML 或從 CMS 提取的 HTML。

 < 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 預設包含的五個灰階中的每一個提供了一個修改器類，因此您可以輕鬆地設計內容以匹配您在專案中使用的灰度。

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

開箱即用包含五種不同的版尺寸：

班級	正文字體大小
`prose-sm`	0.875rem （14 像素）
`prose-base` （預設）	1 雷姆(16 像素)
`prose-lg`	1.125rem （18 像素）
`prose-xl`	1.25rem （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添加到您的內容中以覆蓋嵌入的最大寬度：

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

請注意，此時您無法將新的prose實例嵌套在not-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' ) ,
    // ...
  ] ,
}