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

Posted 2023-03-07

【中文标题】使用 TailwindCSS 和 Typography 插件，我如何允许在 .prose 中使用类进行自定义？

【英文标题】：Using TailwindCSS and the Typography plugin, how do I allow for customizations within .prose using classes?

【发布时间】：2021-06-10 18:38:41

【问题描述】：

我安装了 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 的特异性较低，所以它会被主题样式覆盖。我想在我网站的很多地方使用散文，但偶尔也允许在散文类中进行自定义。有没有办法设置它以便我可以这样做？

【参考方案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

不知道直接修改标签的方法，可能用!importantdeclaration，但看起来比修饰符更hacky。

【讨论】：

这是一个很好的解决方案，谢谢。尽管我一直在寻找一种更松散的方式来分配课程，但我认为这种解决方案更有意义。