用Tailwind CSS Typography 插件添加漂亮的排版默认值

推荐几个好用的​tailwindcss 模板站点

https://github.com/aniftyco/awesome-tailwindcss

https://github.com/rosstopping/tailwindcss-templates

https://github.com/cruip/tailwind-landing-page-template

https://github.com/moesaid/cleopatra

https://github.com/wobsoriano/v-dashboard

官方的 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

然后将插件添加到您的主 style.css 文件中：

@import "tailwindcss";
@plugin "@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 。

笔记 prose 添加灰度修改器时始终包含类

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

要了解如何创建自己的颜色主题，请阅读添加自定义颜色主题文档。

应用类型比例

尺寸修饰符允许您根据不同的情况调整字体的整体尺寸。

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

开箱即用，包含五种不同的字体尺寸：

这些可以与 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>

这样可以轻松地执行诸如样式链接以匹配您的品牌、为图像添加边框半径等操作。

以下是可用元素修饰符的完整列表：

当将这些修饰符与其他修饰符（例如）堆叠在一起时 hover ，您很可能希望将其他修饰符放在最后：

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

如果您仍在使用 Tailwind CSS v3，则修饰符顺序相反：

<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

添加自定义颜色主题

除了简单的 CSS 覆盖之外，您还可以使用基于 JavaScript 的主题 API 来自定义颜色主题。为此，请使用以下 @config 指令：

  @import "tailwindcss";
  @plugin "@tailwindcss/typography";
+ @config "./tailwind.config.js";

tailwind.config.js 然后，您可以通过添加带有该 typography 部分的新文件并在键下提供颜色来创建自己的颜色主题 css ：

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

请参阅我们的内部样式定义以获取更多示例。

更改默认类名

如果您出于任何原因需要使用类名 prose ，您可以 className 在注册插件时使用该选项：

@import "tailwindcss";
@plugin "@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，请首先按照添加自定义颜色主题的步骤来设置基于 JavaScript 的配置 API，然后 typography 在文件 theme 部分中的键下添加您的覆盖 tailwind.config.js ：

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

与 Tailwind 中的所有主题自定义一样，如果您需要访问主题配置，则可以使用 CSS 变量：

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

自定义项应应用于特定的修饰符（例如 DEFAULT 或 xl ），并且必须添加到 属性下。自定义项使用与编写 Tailwind v3 插件 css 相同的CSS-in-JS 语法编写。

请参阅此插件的默认样式以获取有关配置每个修饰符的更深入的示例。