Line Height

Controls the height of lines of text. Line height is crucial for readability and visual comfort, especially in longer paragraphs. Tailwind provides a range of line height utilities that can be applied to text elements to ensure optimal spacing between lines. In Tailwind v4, line height utilities are optimized for variable fonts and better integration with custom typefaces.

Typography1 variant4 examples

Official Docs Open Playground

Basic usage:

<p class="leading-none">No extra space between lines (leading-none)</p>
<p class="leading-tight">Tight line height (leading-tight)</p>
<p class="leading-normal">Normal line height (leading-normal)</p>
<p class="leading-relaxed">Relaxed line height (leading-relaxed)</p>
<p class="leading-loose">Loose line height (leading-loose)</p>

Examples

Different line heights from none to loose

<p class="leading-none">No extra space between lines (leading-none)</p>
<p class="leading-tight">Tight line height (leading-tight)</p>
<p class="leading-normal">Normal line height (leading-normal)</p>
<p class="leading-relaxed">Relaxed line height (leading-relaxed)</p>
<p class="leading-loose">Loose line height (leading-loose)</p>

Edit in playground

Line height used in a modern card design

<!-- Line height in a modern card design -->
<div class="max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden">
  <div class="bg-blue-600 p-6 text-white">
    <h2 class="text-2xl font-bold mb-2 leading-tight">Modern Card Design</h2>
    <p class="text-lg font-medium leading-relaxed italic">Subtitle with relaxed leading and italic style</p>
  </div>
  <div class="p-6">
    <p>This card uses different line heights to create a clear hierarchy.</p>
    <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold">
      Call to Action
    </button>
  </div>
</div>

Edit in playground

Responsive typography with varying line heights

<!-- Responsive typography with varying line heights -->
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 leading-tight">
  Responsive Heading
</h1>
<p class="text-base md:text-lg lg:text-xl font-normal mb-4 leading-normal">
  This paragraph uses normal line height, but you can adjust it based on screen size.
</p>
<p class="text-sm md:text-base lg:text-lg font-semibold leading-loose">
  This text has loose line height and adjusts size responsively.
</p>

Edit in playground

Line height used in a modern interface

<!-- Line height in a modern interface -->
<div class="max-w-lg mx-auto bg-white rounded-lg shadow-md overflow-hidden">
  <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-8 text-white">
    <h2 class="text-2xl font-extrabold mb-4 leading-tight">Dashboard Overview</h2>
    <p class="font-semibold leading-normal">Welcome back to your analytics dashboard</p>
  </div>
  <div class="p-6">
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-2 leading-tight">Statistics</h3>
      <div class="grid grid-cols-3 gap-4 text-center">
        <div>
          <p class="font-bold text-xl leading-tight">1,234</p>
          <p class="font-normal text-sm text-gray-600 leading-normal">Views</p>
        </div>
        <div>
          <p class="font-bold text-xl leading-tight">$5,678</p>
          <p class="font-normal text-sm text-gray-600 leading-normal">Revenue</p>
        </div>
        <div>
          <p class="font-bold text-xl leading-tight">90%</p>
          <p class="font-normal text-sm text-gray-600 leading-normal">Satisfaction</p>
        </div>
      </div>
    </div>
    <div>
      <h3 class="text-lg font-semibold mb-2 leading-tight">Recent Activity</h3>
      <div class="text-sm space-y-2">
        <p class="font-normal leading-normal">New comment on your post</p>
        <p class="font-normal leading-normal">Invoice #12345 paid</p>
        <p class="font-normal leading-normal">New subscriber to your newsletter</p>
      </div>
    </div>
  </div>
</div>

Edit in playground