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 ➡️

The Full Stack Dev Newsletter

The Freelance Avatar

Hey, I'm Wes. Every month I send a newsletter with articles on:

  • ​🔥 Hot Web Dev tips
  • 🎨 Web Design
  • 🔨 Product Development

As seen at the top of Hacker News, Indie Hackers, and Hacker Noon.