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

Question

我已经安装了TailwindCSS 2.0和排版插件。我已经按照文档的建议在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的特异性较低，所以它被主题样式覆盖了。我想在我的网站上的很多地方使用prose，但也允许偶尔在prose类中进行自定义。有没有办法把它设置好，让我可以这样做？

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.tailwindcss.com/4BywohSnz5

我不知道直接修改标签的方法，可能是使用!important declaration，但它看起来比修饰符更老套。