有没有办法在 Tailwind Typography 上为 <p> 使用某种字体

Question

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

# AAAAAAAAAa

BBBBBBB

将被相应地解析为 AAAAAAAAAa 是 h1 并且 BBBBBB 是 <p>，并且所有这些都包含在 prose div 中在使用 Tailwind Typography。一般情况下，两者会共享tailwind.config.js中定义的相同字体，我想知道如何更改此设置，使两者具有不同的字体。

Answer 1

您提供的 link 上有示例。看看Customization and Modifiers.

您可以直接将属性添加到某个元素（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'),
    // ...
  ],
}

A simple demo.

有没有办法在 Tailwind Typography 上为 <p> 使用某种字体

Is there a way to use a certain font for <p> on Tailwind Typography

css

reactjs

next.js

tailwind-css