如何在Tailwind中为不同字体系列适配不同字号与行高？

优先推荐：在主题配置中扩展字体专属字号 #

这是最贴合Tailwind主题化设计思路的做法，把样式规则统一放在配置里管理，后续维护更省心。

假设你的第二种字体叫font-secondary，可以直接在tailwind.config.js里给它单独定义sm字号的行高：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontSize: {
        // 为secondary字体定制sm字号的行高，示例改成1.25rem
        'sm-secondary': ['1rem', '1.25rem'],
      },
      fontFamily: {
        secondary: ['YourActualSecondaryFont', 'sans-serif'],
      },
    },
  },
}

使用时直接组合类：font-secondary text-sm-secondary，所有用第二种字体的sm文本都会自动应用正确的行高，不用重复写样式。

如果你的字体系统更复杂，也可以用Tailwind的自定义变体关联字体和字号，但上面的方式简单直接，能覆盖大部分场景。

临时快速方案：叠加leading类 #

如果只是个别地方需要调整，不想改动配置，直接在现有类上叠加leading-*类覆盖行高就行。比如：

<p class="font-secondary text-sm leading-tight">第二种字体的sm文本</p>

这种方式适合零散的样式调整，但多处使用的话还是推荐第一种方案，避免重复代码。

进阶方案：CSS变量+主题配置 #

如果两种字体的行高差异是系统性的（不止sm字号），可以用CSS变量统一管理：

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      sm: ['1rem', 'var(--sm-line-height)'],
      // 其他字号也可以用变量统一管理
      base: ['1.125rem', 'var(--base-line-height)'],
    },
    fontFamily: {
      primary: ['YourPrimaryFont', 'sans-serif'],
      secondary: ['YourSecondaryFont', 'sans-serif'],
    },
  },
}

然后在全局CSS里通过字体类切换变量值：

.font-primary {
  --sm-line-height: 1.5rem;
  --base-line-height: 1.75rem;
}

.font-secondary {
  --sm-line-height: 1.25rem;
  --base-line-height: 1.6rem;
}

使用时只需要写font-secondary text-sm，变量会自动切换对应的行高，适合复杂的多字体项目。

内容的提问来源于stack exchange，提问作者Daryn