tailwindcss typography
v0.5.15
官方的 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，请在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' ) ,
// ...
] ,
}自定义应该应用于特定的修饰符，例如DEFAULT或xl ，并且必须添加到css属性下。自定义内容是使用与编写 Tailwind 插件相同的 CSS-in-JS 语法编写的。
有关配置每个修饰符的更深入示例，请参阅此插件的默认样式。
如需帮助、有关最佳实践的讨论或任何其他因可搜索而受益的对话：
在 GitHub 上讨论 Tailwind CSS Typography 插件
使用该框架与其他人随意闲聊：
加入 Tailwind CSS Discord 服务器
