如何在Tailwind CSS中为不同字体族独立设置字号与行高？

当然可以实现，不用每次手动添加行高类。这里有两种简单直接的方案：

方案一：在配置文件中扩展带字体族前缀的字号类 #

直接在tailwind.config.js的extend字段中，为每种字体族单独定义字号与行高的组合：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ['mr-eaves-modern', 'sans-serif'],
        serif: ['kepler-std-semicondensed', 'serif']
      },
      fontSize: {
        // 无衬线体专属字号+行高
        'sans-xs': ['0.75rem', { lineHeight: '1rem' }],
        'sans-sm': ['0.875rem', { lineHeight: '1.25rem' }],
        'sans-base': ['1rem', { lineHeight: '1.5rem' }],
        'sans-lg': ['1.125rem', { lineHeight: '1.75rem' }],
        'sans-xl': ['1.25rem', { lineHeight: '1.75rem' }],
        'sans-2xl': ['1.5rem', { lineHeight: '2rem' }],
        // 衬线体专属字号+行高
        'serif-xs': ['0.75rem', { lineHeight: '1.1rem' }],
        'serif-sm': ['0.875rem', { lineHeight: '1.3rem' }],
        'serif-base': ['1rem', { lineHeight: '1.6rem' }],
        'serif-lg': ['1.125rem', { lineHeight: '1.8rem' }],
        'serif-xl': ['1.25rem', { lineHeight: '1.8rem' }],
        'serif-2xl': ['1.5rem', { lineHeight: '2.1rem' }],
      }
    },
  },
  plugins: [],
}

使用时，组合字体族类和对应前缀的字号类即可：

<!-- 无衬线体2xl，自带对应行高 -->
<p class="font-sans text-sans-2xl">无衬线体内容</p>
<!-- 衬线体2xl，自带对应行高 -->
<p class="font-serif text-serif-2xl">衬线体内容</p>

方案二：用自定义工具类绑定字体、字号、行高 #

如果觉得前缀类不够简洁，可以在全局CSS文件中用@layer utilities创建一站式工具类，把字体族、字号、行高打包在一起：

@layer utilities {
  /* 无衬线体系列 */
  .text-sans-xs {
    font-family: mr-eaves-modern, sans-serif;
    font-size: 0.75rem;
    line-height: 1rem;
  }
  .text-sans-2xl {
    font-family: mr-eaves-modern, sans-serif;
    font-size: 1.5rem;
    line-height: 2rem;
  }

  /* 衬线体系列 */
  .text-serif-xs {
    font-family: kepler-std-semicondensed, serif;
    font-size: 0.75rem;
    line-height: 1.1rem;
  }
  .text-serif-2xl {
    font-family: kepler-std-semicondensed, serif;
    font-size: 1.5rem;
    line-height: 2.1rem;
  }

  /* 其他字号按同样方式补充 */
}

使用时直接添加单个工具类即可：

<p class="text-sans-2xl">无衬线体内容</p>
<p class="text-serif-2xl">衬线体内容</p>

两种方案都能避免重复添加行高类，可根据自己的使用习惯选择。

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