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

【问题标题】：Is there a way to use a certain font for <p> on Tailwind Typography有没有办法在 Tailwind Typography 上为 <p> 使用某种字体
【发布时间】：2021-11-02 16:06:24
【问题描述】：

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

# AAAAAAAAAa

BBBBBBB

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

【问题讨论】：

标签： css reactjs next.js tailwind-css

【解决方案1】：

您提供的链接上有示例。看看Customization 和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.

【讨论】：