2.0 Adds line-heights to font-size utilities by default which overtakes .leading-tight in specify

introduced by 7d10259

When doing

h1 {
  @apply leading-tight text-5xl;
}

The outcome is

@media (min-width: 1024px)
.lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
}

Overtakes

h1 {
    font-size: 3rem;
    line-height: 1;
    line-height: 1.25;
}

in specify
IE:

Also Just noticing the other odd-looking line-height: 1; on h1.

[adamwathan]

Can you share your HTML as well? It looks like maybe you are doing this:

<h1 class="lg:text-5xl">Hello</h1>

If so, then what you are seeing is by design, adding lg:text-5xl will override the line-height. You can add lg:leading-tight to override the default.

[ndrsllwngr]

I experienced the same issue.

• Example: https://play.tailwindcss.com/flalBqN5dE

I would expect that leading-tight (line-height: 1.25) would take precedence for all viewports (incl. md and up) over the line-height set by text-4xl md:text-7xl. But having viewport >= md leading-tight gets overwritten.

If providing the viewport provides greater specificity and that is by design then I'm ok with that.
Closing as by design. Thanks for the clarification lg:leading-tight works for me.

[howdu]

Future viewers who land here... you can now remove the line-height see: #6504 (comment)