使用 TailwindCSS 和 Typography 插件，如何允许使用类在 .prose 中进行自定义？

Question

我安装了 TailwindCSS 2.0 和 Typography 插件。我已经按照文档的建议在 Tailwind 配置中自定义了默认样式。在我的自定义中，我有文本颜色的样式，甚至还有 h2、h3 等的自定义，一切都按预期工作。

但是，我希望能够偶尔通过将类直接添加到标签来修改 .prose 类中的样式。例如：

<div class="prose">
<h2 class="text-red-400">Make this heading red even though the default configuration makes it grey.</h2>
</div>

上面的代码似乎对更改标题 2 没有影响。我猜是因为 text-red-400 的特异性较低，所以它被主题样式覆盖。我想在我的网站上的很多地方使用散文，但偶尔也允许在散文类内部进行自定义。有没有办法进行设置以便我可以做到这一点？

Answer 1

不确定这是否是您想要的，但您可以prose-*向配置添加新的修饰符并在代码中使用它们。

<div class="prose prose-red-h2">
  <h2>Make this heading red even though the default configuration makes it grey.</h2>
</div>

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      typography: {
        'red-h2': {
          css: {
            h2: {
              color: colors.red['600'],
            },
          },
        },
      },
    },
  },
  variants: {},
  plugins: [require('@tailwindcss/typography')],
}

游乐场链接：https://play.tai​​lwindcss.com/4BywohSnz5

不知道直接修改标签的方法，也许可以使用!important 声明，但它看起来比修饰符更hacky。