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

不知道直接修改标签的方法，也许用 !important declaration，但它似乎比修饰符更hacky。

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

1 个答案: