如何修改 TailwindCSS 中 Typography 散文类的默认样式？答案

【问题标题】：How do I modify the default styling of the Typography prose class in TailwindCSS?如何修改 TailwindCSS 中 Typography 散文类的默认样式？
【发布时间】：2021-06-10 03:29:31
【问题描述】：

我有一个 TailwindCSS 2.0 项目，并且我已经安装了所有插件，包括 Typography 插件。当我创建一个 div class="prose" 时，我可以将任何标题、段落、列表等放入其中，并由 Typography 插件设置样式。

在我的项目中，我希望散文类中的所有内容都默认为某种蓝色。而且我还希望链接是我在配置中定义的某种链接颜色。这些只是我想要进行的一些修改，以便默认散文类使用我的样式设置所有样式。我该怎么做？最好的做法是什么？

【问题讨论】：

标签： tailwind-css

【解决方案1】：

可以扩展排版插件

tailwind.config.js

module.exports = {
  theme: {
    typography: {
      DEFAULT: { // this is for prose class
        css: {
          color: theme('colors.yourSpecificColor'), // change global color scheme
          p: {
            fontSize: '14px', // key can be in camelCase...
            'text-align': 'center', // or as it is in css (but in quotes).
          },
          a: {
            // change anchor color and on hover
            color: '#03989E',
              '&:hover': { // could be any. It's like extending css selector
                color: '#F7941E',
              },
          },
          ul: {
            '> li': {
               '&::before': { // more complex example - add before to an li element.
                  content: '',
                  ....,
               },
             },
          },
        },
      },
      sm: { // and this is for prose-sm. 
        css: {
           ....
        },
      },
    },
  },
}

更糟糕的是，如果您在“其他”断点中更改某些内容而不仅仅是散文，例如“prose-sm”、“prose-md”等，更改不会继承，所以如果您将颜色更改为散文中的蓝色，散文中不会改变

定制可以找here

附：在下面的示例中，我可能会弄乱大量的花括号，抱歉，很难跟踪:)

【讨论】：

谢谢。我意识到我没有足够仔细地阅读文档 - 我让它工作了。我现在想弄清楚的是如何允许修改 .prose 中的内容？例如，如果我的默认样式设置为一种方式，我似乎无法将类添加到 .prose 中的标签并产生任何效果。例如，这什么都不做：
这应该变成红色，但它符合主题风格
。关于如何允许修改的任何想法？
由于 CSS 的一种工作方式 - .prose h2 的优先级高于一个类 .text-red-400。我想，排版对象内的类选择器'h2.text-red-400'会起作用，但我从未尝试过。散文的目的是为您无法控制的内容设置样式 - 例如 CMS 输出等

这应该变成红色，但它符合主题风格