css - 有没有办法使用某种字体在顺风排版

Question

例如，假设我想使用以下降价

# AAAAAAAAAa

BBBBBBB

这将被相应地解析为 AAAAAAAAAa ish1和BBBBBBis <p>，并且所有这些都包含在使用Tailwind Typographyprose的div 中。在正常情况下，两者将共享 中定义的相同字体，我想知道如何更改此设置以使两者具有不同的字体。tailwind.config.js

标签： cssreactjsnext.jstailwind-css

Answer 1

您提供的链接上有示例。看看 自定义和修改器。

您可以直接将属性添加到某些元素（h1、h2、h3、p等）。请参见下面的示例：

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            color: '#333',
            h1: {
              fontFamily: ['Roboto', 'sans-serif'],
            },
            p: {
              fontFamily: ['Montserrat', 'sans-serif'],
            },
          },
        },
      }
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

或者您可以像这样创建自己的修饰符：

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      typography: {
        '3xl': {
          css: {
            fontSize: '1.875rem',
            h1: {
              fontSize: '4rem',
              fontFamily: ['Montserrat', 'sans-serif'],
            },
            p: {
              fontSize: '1.5rem',
              fontFamily: ['Roboto', 'sans-serif'],
            },
            // ...
          },
        },
      },
    }
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

一个简单的演示。