Working with Line Heights in Tailwind CSS

To apply a line height in Tailwind CSS, you can use the leading class.

<p class="text-xl leading-relaxed">This is a big line height!!!</p>

However, if you add a font size at a larger breakpoint, the font size at that breakpoint will override the line height you set. To fix this, you need to re-apply your line height at that breakpoint as well, even if it is the same line height class!

<p class="text-xl md:text-2xl leading-relaxed md:leading-relaxed">
    This is a big line height!!!
</p>

This is a big line height!!!

You can see all of the available line height classes here ➡️