CSS ` line-height` not working properly

[Zerotask]

It seems that line-height is adding too much space between elements

Example: https://play.tailwindcss.com/lbWhMHWdpF

<div class="text-center uppercase">
  <h1 class="text-7xl">This is a main headline</h1>
  <h2 class="text-5xl font-medium">This is a sub-headline</h2>
</div>

.text-center {
  text-align: center;
}
.uppercase {
  text-transform: uppercase;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-7xl {
  font-size: 4.5rem;
  line-height: 1;
}
.font-medium {
  font-weight: 500;
}

Output on Tailwind Play:

Output WeasyPrint:

[liZe]

Hi!

I tried this sample:

<style>
html {
  font-family: Liberation Serif;
}
.text-center {
  text-align: center;
}
.uppercase {
  text-transform: uppercase;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-7xl {
  font-size: 4.5rem;
  line-height: 1;
}
.font-medium {
  font-weight: 500;
}
</style>
<div class="text-center uppercase">
  <h1 class="text-7xl">This is a main headline</h1>
  <h2 class="text-5xl font-medium">This is a sub-headline</h2>
</div>

Here’s what I get with WeasyPrint:

Here’s what I get with a browser:

If your problem is the space between your h1 and your h2 tags, then it’s probably not the line-height but the margins: h tags have top and border margins in the default stylesheet, in WeasyPrint and browsers. Looks like there’s a kind of CSS reset stylesheet in @tailwind base that removes margins from h tags, because the margins are back when I remove this line in Tailwind Play.

[Zerotask]

Yes, you are right, I meant the space between h1 and h2. Thank you

@layer __play_base__
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
margin: 0;
}

must be this style. It seems like I'm already too used to Tailwind so I thought it's normal, that headlines have no margin :D