如何在Tailwind Typography中为<p>标签单独设置指定字体

全局配置（所有prose容器统一生效） #

1. 先在tailwind.config.js的theme.extend.fontFamily中声明你要用到的两款字体：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {
      // 自定义字体族
      fontFamily: {
        heading: ['Montserrat', 'sans-serif'], // 替换为你要给h1用的字体
        body: ['Open Sans', 'sans-serif'], // 替换为你要给p标签用的字体
      },
      // 覆盖Tailwind Typography的默认样式
      typography: {
        DEFAULT: {
          css: {
            h1: {
              fontFamily: theme => theme('fontFamily.heading'),
            },
            p: {
              fontFamily: theme => theme('fontFamily.body'),
            }
          }
        }
      }
    },
  },
  plugins: [require('@tailwindcss/typography')],
}

如果你的字体是通过CSS变量引入的（比如框架内置的本地字体方案），直接把变量值填入fontFamily即可，示例：

h1: {
  fontFamily: 'var(--font-inter)',
}

局部配置（仅单个prose容器生效） #

不需要修改配置文件，直接在prose类名后追加修饰类即可，适合局部样式差异化的场景：

<div class="prose prose-h1:font-heading prose-p:font-body">
  <!-- 这里放markdown渲染后的内容 -->
</div>

注意使用的字体需要提前在项目中引入，否则会 fallback 到系统默认字体

内容的提问来源于stack exchange，提问作者nwatx