使用TailwindCSS和Typography插件，我如何允许在.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>

上面的代码似乎对改变标题没有影响。我猜是因为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.tailwindcss.com/4BywohSnz5

不知道直接修改标签的方法，可能使用!important声明，但它似乎比修饰符更黑客。

Answer 2

注意，由于颜色存储在CSS变量中，您也可以直接修改这些变量。这对于在React中将颜色编辑为用户定义的值特别有用:

<div
className="prose"
style={{ "--tw-prose-body": myColor }}
>
<p>Hello world</p>
</div>

你可以在Tailwind排版插件页面上查看所有颜色变量的列表，或者通过检查<div class="prose">元素上的CSS。