Tailwind CSS：多断点设置字号的标题未显式设置leading时忽略继承行高

问题原因 #

当你配置 text-3xl leading-tight sm:leading-loose sm:text-4xl xl:text-5xl 时，xl 断点下会使用 text-5xl 自带的默认行高，而非继承 sm:leading-loose，核心逻辑是：

• Tailwind 的所有 text-* 字号类都绑定了预设的行高值，比如 text-3xl 对应默认行高，text-5xl 也有它自己的预设行高；
• 在 xl 断点触发时，xl:text-5xl 会生成包含行高的 CSS 规则，这个规则和 sm:leading-loose 在 xl 断点下的优先级相同，但因为字号类的行高是随字号绑定的，最终会覆盖你手动设置的 sm:leading-loose。

你的理解偏差在于：断点的样式继承是“未在更大断点设置该属性时，沿用小断点配置”，但这里 xl:text-5xl 相当于在 xl 断点主动重置了行高，不属于“未设置”的场景，所以不会继承 sm 断点的行高。

解决方法 #

1. 显式指定断点行高：直接给 xl 断点添加行高类，比如 xl:leading-loose，这是最直接的解决方案；
2. 自定义字号配置：在 tailwind.config.js 中修改字号预设，移除自带的行高，让行高完全由 leading-* 类控制：

   module.exports = {
     theme: {
       extend: {
         fontSize: {
           '3xl': ['1.875rem', { lineHeight: 'unset' }],
           '4xl': ['2.25rem', { lineHeight: 'unset' }],
           '5xl': ['3rem', { lineHeight: 'unset' }],
         },
       },
     },
   }
   

3. 封装自定义样式：用自定义 CSS 结合 @apply 封装带固定行高的字号样式，避免重复写断点行高。

关于硬编码 line-height 无效的问题：Tailwind 的类选择器优先级高于行内样式，除非你给行内样式加 !important，否则会被覆盖，建议优先使用 Tailwind 的工具类来处理样式。

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