defaultLineHeights requires code repetition when used with responsive fontSize

[fedeci]

Describe the problem:

Non-responsive leading utilities don't work if used along with responsive variants of the fontSize utility and the defaultLineHeights future enabled.
This is more a problem of style and code repetition than a real bug, but it is quite annoying to deal with.

e.g.

<!-- Because sm:text-3xl and md:text-4xl have a higher priority, leading normal does not work -->
<div class="text-2xl sm:text-3xl md:text-4xl leading-normal"></div>

<!-- To make it work you have to specify responsive variants making the code repetitive -->
<div class="text-2xl sm:text-3xl md:text-4xl leading-normal sm:leading-normal md:leading-normal"></div>

A possible solution may be to mark the leading utility as !important, but it definitely should be discussed first.

Link to a minimal reproduction:

https://play.tailwindcss.com/Lw5MjdPa6J

[adamwathan]

Yeah this is a deliberate trade-off I'm afraid — in our own work we basically never use the same line-height across changes in font size, we always change the line-height as well.

The best solution if you don't want the default line-height stuff is to override your fontSize configuration to use font-sizes with no built-in line-height:

module.exports = {
  theme: {
    extend: {
      fontSize: {
        xs: '0.75rem',
        sm: '0.875rem',
        base: '1rem',
        lg: '1.125rem',
        xl: '1.25rem',
        '2xl': '1.5rem',
        '3xl': '1.875rem',
        '4xl': '2.25rem',
        '5xl': '3rem',
        '6xl': '4rem',
      }
    }
  }
}

My personal opinion is that you probably don't actually want leading-normal at each size. It's definitely way too much line-height for text-3xl and text-4xl like in your example, and 1.5 almost always leads to your text being a weird height that is not part of the spacing scale.