如何为Tailwind prose类统一设置标题字体？现有配置无效

配置不生效的常见原因 #

• 先确认Bebas Neue字体已正确引入项目：不管是通过Google Fonts的link标签，还是本地字体文件的@font-face声明，没引入的话浏览器会直接用后备的sans-serif，看起来就像配置没起作用
• 检查@tailwindcss/typography插件是否正确安装并注册：必须在tailwind.config.js的plugins数组里添加require('@tailwindcss/typography')，不然prose相关配置根本不会生效

简洁的批量配置写法 #

不用逐个写h1到h5，直接用CSS选择器组合就能一次性设置所有标题：

theme: {
  typography: {
    DEFAULT: {
      css: {
        'h1, h2, h3, h4, h5, h6': {
          fontFamily: ['Bebas Neue', 'sans-serif'],
        },
      },
    },
  },
  // 可选：先在全局字体库注册该字体，方便后续复用
  fontFamily: {
    bebas: ['Bebas Neue', 'sans-serif'],
  },
}

如果习惯用Tailwind的@apply语法，也可以这么写：

theme: {
  typography: {
    DEFAULT: {
      css: {
        'h1, h2, h3, h4, h5, h6': {
          '@apply font-bebas': {},
        },
      },
    },
  },
  fontFamily: {
    bebas: ['Bebas Neue', 'sans-serif'],
  },
}

额外提示 #

• 如果用了prose-lg这类变体，确保DEFAULT里的样式能继承，或者在对应变体的配置里重复设置（一般DEFAULT的样式会被变体继承）
• 要是配置后还是没效果，打开浏览器开发者工具查看标题元素的font-family属性，检查是不是被其他更高优先级的样式覆盖了，优先调整样式优先级，实在不行再考虑加!important（尽量少用）

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