如何将Tailwind Typography自定义maincolors颜色主题应用到前端？

方式1：在目标元素上直接添加主题类 #

Tailwind Typography会为你定义的自定义主题生成对应的工具类，格式为 prose-[主题名]。你只需将这个类添加到包含富文本内容的容器元素上即可：

<div class="prose prose-maincolors">
  <h1>示例标题</h1>
  <p>这是一段测试段落，标题会自动应用你配置的dark色值</p>
</div>

方式2：全局默认启用该主题 #

如果希望项目中所有使用prose类的元素都默认应用maincolors主题，可以在Tailwind配置的插件选项里设置默认主题：

plugins: [
  require('@tailwindcss/typography')({
    defaults: 'maincolors',
  }),
]

配置完成后，只需给容器添加基础的prose类，就会自动应用maincolors主题的样式：

<div class="prose">
  <!-- 这里的富文本内容会自动使用maincolors主题 -->
</div>

额外提示 #

• 确认你已经正确安装并启用了Tailwind Typography插件（配置文件中已引入的话无需额外操作）
• 自定义主题的类名规则是固定的：prose- + 你在配置中定义的主题名称

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