如何修改 TailwindCSS 中 Typography prose 类的默认样式？

Question

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

在我的项目中，我希望默认情况下散文类中的所有内容都是某种蓝色。我还希望链接是我在配置中定义的某种链接颜色。这些只是我想要进行的一些修改，以便默认的散文类可以按照我的风格对所有内容进行样式设置。我该如何去做？最佳实践是什么？

Answer 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”等，则更改不会继承，因此如果您将颜色更改为蓝色prose，它不会改变prose-sm。

定制可以在这里找到

PS 在下面的例子中，我可能会搞乱大量的大括号，抱歉，很难跟踪:)