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: {
           ....
        },
      },
    },
  },
}

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

自定义可以找到here

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

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

1 个答案: